标签：浏览器 标签 介绍 表单 html Html5 链接 属性
Vs code 软件是一款微软公司推出的免费的轻量级编辑器。
Ctrl+放大视图
Ctrl-减小视图
Shift+alt+方向键 向上、下复制一行
Emmet语法快速生成html结构语法
！+tab形成骨架
标签+ tab 形成标签 div+tab
父子级关系，可以用> ul>li
兄弟级关系+ div+p+tab
生成个标签* div*6+tab
.nav <div class=”nav”></div>
#banner<div id=”banner”></div>
(默认生成div标签)
p.one <p class=”one”></p>
span#gay<span id=”gay”></span>
如果标签内想写内容可以用{}表示
.demo$*6 生成类名有序（$自增符号,从1开始排序）
网页是网站中的一页，网页是html文档文件，网站通过一定规则，使用html等制作的用于展示特定内容的相关网页的集合，通过浏览器显示。网页是网站基本元素。因为html中的多媒体内容超越了文本限制，所以html被称为超文本标记语言。
Html语言是描述网页的语言
常用浏览器
谷歌浏览器，火狐浏览器，IE浏览器…
浏览器内核作用是渲染引擎，读取网页内容，计算显示方式。
- Web标准是国际万维网（W3C）联盟制定。浏览器内核不同，计算显示页面有差异，所以需要标准。
- Web标准
HTML 结构 网页元素
CSS 表现 外观样式
JS 交互 交互效果，行为动作
Html语法
单标签 双标签
标签关系： 包含关系 并列关系
<html lang="en">//根标签
<head>//头部
<meta charset="UTF-8">//万国编码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>//文档显示主题
</head>
<body></body>//文档内容
</html>
<!DOCTYPE html>//文档类型说明，一般在html标签之前
Html常用标签
标签的语义就是标签的含义
（1）标题标签
<h1>-</h1>…
<h6>-</h6>
重要性依次递减，加了标题标签的文字会加大加粗，一个标题独占一行。
（2）段落标签
<p></P>
文本在一个段落中会根据浏览器窗口界面大小自动换行，段落之间有间隙，一个段落独占一行。
（3）强制换行标签
<br>是单标签，只是简单地开始新的一行。
（4）文本格式化标签（突出重要性，比普通文字更加重要）
加粗
<strong></strong>
<b></b>
倾斜
<em></em>
<i></i>
删除线
<del></del><s></s>
下划线
<ins></ins><u></u>
（5）div和span标签，没有语义，只是一个盒子，用来装内容，用来布局再好不过。
Div一行只能放一个，大盒子；span一行只能放多个，小盒子。
（6）图像标签
<img src=”图像url”/> src是图像标签的必须属性，用于指定图像文件的路径。（必须属性）
图形标签其他属性：
| alt | 替换文本（图片无法显示） |
| title | 提示文本（鼠标在图片上时候） |
| width | 宽度 |
| height | 高度 |
| border | 图像边框 |
（7）路径
相对路径（图像与html文件关系）
同一级路径 直接写名字
下一级路径 /
上一级路径 ../
绝对路径:指的是目录下的绝对位置，直接到达目标位置，长从盘符开始的路径。
（8）超链接标签
<a href=”跳转目标” target=”目标窗口弹出方式”>
Href为必要属性
Target的属性值有2种：_self当前页面打开（默认）；_blank新窗口打开
链接的分类
I 外部链接
<a href="http://地址">123</a>
II内部部链接(内部网页之间相互链接)
<a href="1.html">内部链接</a>
III 空链接
<a href="#">空链接</a>
IV下载链接
当Href里面地址是一个文件/压缩包，点击链接会自动下载这个文件。
V 网页元素链接 网页中各种元素，文本，图像，音频，视频都可以都可以添加超链接。
VI锚点链接（点击链接可以快速定位到页面对应位置）
<a href="#oo">锚点链接</a>
<p id="00">锚点链接</p>
（9）注释
快捷键ctrl+/
<!-- -->
（10）特殊字符
| 空格 | |
| 大于号> | > |
| 小于号< | < |
（11）表格标签
表格标签用于布局，展示数据
<table>
<tr>
<th>123</th>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</table>
Th标签是表头单元格标签，突出重要性。
表格属性
| align | Left,center,right（对齐方式）指的是表格位置 |
| border | 边框（默认为无） |
| cellpadding | 单元格边沿与内容之间空白，默认1px |
| cellspacing | 单元格之间空白（默认2px） |
| width | 宽度 |
| height | 高度 |
表格结构标签
表格头部thead区域
表格主体tbody区域
可折叠标签使得结构简单明确
合并单元格（合并以后删除多余单元格）
| 跨行合并 | Rowspan=”合并单元个数”(垂直方向) |
| 跨列合并 | Colspan=” 合并单元个数” (水平方向) |
（12）列表标签
| 无序列表 |
| 有序列表 |
| 自定义列表 |
li是列表项目
无序列表
<ul>
<li></li>
</ul>
ul中只能有li，li中可以放任何标签。
无序列表会带有自己的样式。
有序列表
<ol>
<li></li>
</ol>
ol中只能有li，li中可以放任何标签。
有序列表会带有自己的样式。
自定义列表：对术语/名词进行解释，定义列表项前无任何项目符号。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
</dl>
dl中只能有dt,dd，dt,dd中可以放任何标签, dt,dd个数无限制，常常是一个dt对应多个dd。
（13）表单标签
表单的目的是为了收集信息。
表单的组成：表单域，表单控件也被称为表单元素（方框、按钮），提示信息（文字信息）
I表单域是包含一个表单元素的区域，实现用户信息收集和传递。
form会把它范围内的表单元素提交给服务器
<form action="url地址" method="提交方式" name="表单域名称"></form>
II表单元素
（1）Input输入表单元素 单标签
Input用于收集用户信息
<input type="属性值">
Type是必须属性
Type常用属性值
| text | 文本框（20字符） |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| button | 定义单击按钮，不提交信息，用于和JS一起做某事 |
| submit | 提交按钮（默认显示“提交”，可通过value更改） |
| reset | 重置按钮默认显示“重置”，可通过value更改） |
| File | 上传文件 |
Input其他属性，name
同组的Radio和checkbox必须用相同的名字。
相同名字Radio是为了实现多选一
Input其他属性，value（规定Input元素的值）
规定框内默认显示文字/点击按钮把值送给后台
（value主要是后台人员使用）
Input其他属性，checked 主要针对单选按钮，复选框；页面打开时的默认选项。
Checked=“checked”
Input其他属性，maxlength规定输入字段中字符最大长度。
Label标签为Input定义标注标签
Label可以绑定一个表单元素，当点击<label>标签文本内容时候，浏览器会自动转到对应光标上。（for中的内容和id中内容相同）
<input type="radio" id="sex1" name="sex"><label for="sex1">男</label>
<input type="radio" id="sex2" name="sex"><label for="sex2">女</label>
（2）Select 下拉表单元素 多个选项让用户选择，节约页面空间<select name="" id=""> <opition></opition> <opition></opition> <opition></opition> </select>
在opition中定义selected=”selected”,设置默认选择项
（3）Textarea文本域元素
书写大量文字
<textarea name="" id="" cols="30" rows="10"></textarea>
Rows 行数
Cols 每行字符数
标签：浏览器,标签,介绍,表单,html,Html5,链接,属性 来源： https://blog.csdn.net/xuedaiyuan_123/article/details/120974022
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。