前端基础

Posted 2022-01-02 666666pingzi

6月6日 前端 html
介绍：
超文本标记语言的结构包括 "头" 部分 （head）和主体部分（body），其中"头"部提供关于网页的信息，
"主体"部分提供网页的具体内容。

一.常见的html标签
1.注释 ：<!---->
注释标签用于在源代码中插入注释。注释不会显示在浏览器中。

2.标题标签
<h1><h1/>
一共有六级标题 h1 - h6

3.段落和换行标签
p 段落标签
br 换行标签，没有结束标签
hr 标签在HTML页面中创建一条水平线。水平分割线可以再视觉上将文档分隔
成各个部分，没有结束标签

4.块标签
div 标签块元素，表示一块内容，没有具体的语义。
div标签可以把文档分割为独立的不同的部分。它可以用作严格的组织工具，并且
不使用任何格式与其关联

span 标签 行内元素，表示一行中的一小段内容，没有具体的语义。 行内样式标签

5.含样式和语义的行内标签
i 行内元素，字体倾斜
em 行内元素，语义为强调内容，表示重要（倾斜效果）
b 行内元素，字体加粗
strong 行内元素，语义为强调内容，表示非常重要（效果加粗）
6. img 标签 可以显示图片
<img src="img/小姐姐.PNG" alt="这是一个图片" width="500" height="300">

7. a 标签
表示一个链接

8.列表

有序列表
<ol>
<li>有序列表</li>
<li>哈哈</li>
</ol>


无序列表
<ul>
<li>2</li>
<li>3</li>
</ul>

9.表格
table 标签定义html表格
简单的HTML表格油table元素以及一个或多个tr th 或td元素组成。
tr元素定义表格，th元素定义表头，td元素定义表格单元。

<table border="1px" width="500px" cellpadding="0" cellspacing="0">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

10.form 标签名
form 标签用于为用户输入创建html表单，表单能够包含input 元素，比如文本字段、单选框
复选框、提交按钮等等。
form标签的属性：
action:定义表单数据提交地址
method:定义表单提交的方式（常见的有get和set）

form表单中包含的元素

元素标签
label 表单元素定义文字标注
input 定义通用的表单元素
textarea 定义多行文本输入框，可以输入多行文字
select 定义下拉表单元素
option 与select标签配合，定义下拉表单元素中的选项

type属性
text 输入文本
password 密码输入框
radio 单选框
checkbox 复选框
file 定义上传文件
submit 提交按钮
button 普通按钮
reset 重置按钮
image 图片提交按钮
hidden 定义一个隐藏的表单域，用来储存值

例子：
<form method="get">
<label for="">用户名：</label>
<input type="text" name="user" value="哈哈"></input><br>
<label for="">密码：</label>
<input type="password" name="pwd"></input><br>
<input type="submit"><br>
<select name="" id="">
<option value="">请选择</option>
</select>
</form>

常用快捷方式：
alt+? 快捷注释
标签名*数字 快捷创建多个标签
标签名>标签名*数字 快捷创建多个多层标签