标签：编码 标记 标签 元素 html nbsp 超文本 属性
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。下面是我学习html前半部分后作出的简单总结以及一些练习实例，鄙人才疏学浅，敬请大佬指正。
1、html基本格式
<!DOCTYPE html> <!--声明文档解析类型-->
<html> <!--根标签（开始）-->
<head> <!--头标签（开始）-->
<title>html基本结构</title> <!-- 整个页面标题 -->
</head> <!--头标签（结束）-->
<body> <!--主体标签（开始）-->
<!--代码要缩进-->
<h1>我的第一个标题</h1> <!--主题内容中的标题-->
<p>我的第一个段落</p> <!--页面内容-->
</body> <!--主体标签（结束）-->
</html> <!--根标签（结束）-->
2、html标签
单标签：<br />
双标签：<标签名></标签名>
3、html属性
定义：用来完成对受控文字的某些特殊效果或功能。
html属性分为：属性名和属性值。
属性名=属性值 中间使用=分隔 属性值写在引号（单引号或双引号）里面。
<a href="https://www.baidu.com/">百度一下</a>
html除了现有属性，还有自定义属性：
<a href="https://www.baidu.com/" data-wm="pdsu.cn">百度一下</a>
属性名在html5里面加data-作为前缀后接一个或多个字母，属性值随便写，
自定义属性默认不会对页面展示造成任何影响。
4、html元素
定义：从开始标签到结束标签所有代码。
html元素内容：从开始标签到结束标签之间的内容。
html元素分为：块级元素和内联元素
块级元素：占页面整行长度 <div></div>
内联元素：只占元素内容长度
<span></span>
5、html注释
<!-- 被注释的内容 -->
为了给写代码的人看的。
6、html编码
非数字的进行编码。
（1）设置html文档所在文件编码
（2）在html文档中用标签指定浏览器使用某编码进行展示网页（指定与
html文件的编码相对应的编码即可)
文件编码为utf-8在html中标签指定utf-8编码展示网页
文件编码为ansi在html中标签指定jb2312编码展示网页
常用编码：utf-8或jb2312
<head>
<!-- 声明：utf-8国际编码 gbk jb2312中文编码 -->
<meta charset="utf-8" />
<title>页面标题</title>
</head>
7、html常用标签
1、水平线
单纯水平线：<hr /> 类型：单标签
2、主题内容中的标题
<h1></h1> <!--一级标题-->
<h2></h2> <!--二级标题-->
<h3></h3> <!--三级标题-->
<h4></h4> <!--四级标题-->
<h5></h5> <!--五级标题-->
<h6></h6> <!--六级标题-->
类型：双标签
3、段落
<p></p> 类型：双标签
4、换行
<br /> 类型：单标签
5、空格
（1）  不是标签，可以当做特殊字符。
（2）输入法用全角
6、无序列表
<!-- 列表需要嵌套写法 -->
<ul>
<li></li>
<li></li>
</ul>
7、有序列表
<ol>
<li></li>
<li></li>
</ol>
子元素，父元素，后代元素，兄弟元素
8、定义列表
<dl>
<dt></dt>
<dd>
</dd>
</dl>
类型：块级元素
9、插入图片
<img src="" alt="" width="" height="" />
属性src里填图片路径
图片路径分为：绝对路径和相对路径<!--相对路径：相对于当前html文件路径-->
./当前目录…/上一级目录
在当前目录建一个文件夹：images 将所展示图片都放在里面
属性alt里填图片说明
属性width里填图片长度：也可以用百分比表示
属性height里填图片高度：也可以用百分比表示
类型：内联元素
实例
<img src="images/1.jpg" alt="二哈" width="200" height="100"/>
10、超链接
<a href="https://www.baidu.com/" title="鼠标悬停显示" target="_blank">百度一下</a>
属性href：需要连接的网址，网站建设初期用#链接表示空链接
属性title：鼠标悬停显示
属性target：设置_blank，在新窗口打开链接地址
类型：内联元素
11、指定图片某块区域加超链接
（1）为map标签加上id属性，定义一个唯一属性
（2）为保证兼容性加name属性，属性值与id值相同
（3）为map标签所作用图片img标签加usemap属性，属性名为#id名称
（4）在map标签内嵌套area标签实现给指定区域加链接
<area shape="" coords="" href="" alt="" />
属性shape：定义链接区域形状，常用值rect（矩形）circle（圆形）
属性coords：确定区域精确位置，填坐标<!--以左上角为原点-->
属性href：链接地址
属性alt：链接说明
12、div容器
div标签可以看成存放标签的容器 类型：块级元素
13、span内联元素
组合内联元素，以便css美化
14、表格
实例
<table border="1" cellpadding="2" cellspacing="1">
<tr>
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<td>小王</td>
<td>133</td>
<td>19</td>
<td>100</td>
</tr>
</table>
table标签
属性：border 作用：规定表格边框宽度
属性：cellpadding 作用：规定文字和边框的间距
属性：cellspacing 作用：规定每个单元格边框宽度
tr标签：html表格中的行
th标签：表格内表头单元格
td标签：表格内普通单元格
常用属性：
colspan：规定单元格可横跨列数，值为数字
rowspan：规定单元格可横跨行数，值为数字
15、表单
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html表单提交</title>
</head>
<body>
<h1>账户登录</h1>
<form name="submit" action="https://www.baidu.com/" target="_blank" method="get">
账号：<input name="text" type="text" size="20" />
<br />
密码：<input name="password" type="password" size="20" />
<br />
<input type="submit" value="确认登录" />
             
     
<input type="reset" value="清空" />
</form>
</body>
</html>
1、标签<form>：定义供用户输入的html表单
属性：
action：规定提交表单向何处发送表单数据
name：表单命名
target：_blank在新窗口打开
method：提交方式，get或post值
类型：双标签
2、<input>标签:定义表单输入页面
<!-- 通过type属性展示不同输入页面，通过value改变默认值 -->
（1）普通文本框：
<input type="text" />
（2）密码框：
<input type="password" />
（3）文件上传：
<input type="file" />
（4）隐藏的input：
<input type="hidden" />
（5）普通按钮：
<input type="button" />
（6）单选：
<input type="radio" /> 通过相同name属性实现单选
实例
<input type="radio" name="sex">男<input type="radio" name="sex">女
（7）复选框：
<input type="checkbox" />
（8）提交：
<input type="submit" />
（9）重置：
<input type="reset" />
属性checked 可用值checked：用于选择页面（单复选），实现默认选择
属性disabled 可用值disabled：使标签不可用
属性name：给input输入界面起名字
属性readonly 可用值readonly ：使输入界面为只读状态
属性size 值为数字：设置输入框长度
属性value：该属性值为input提交到页面的数据，可通过该属性设置默认值
3、textarea标签：定义多行输入框
属性cols 值为数字
属性rows 值为数字
也可使用disabled name readonly属性
实例
自我介绍：<textarea cols="20" rows="10"></textarea>
4、label标签：提升用户体验
标签for属性与input的id属性相同
5、select标签：配合option实现下拉菜单
可用属性：disabled name multiple
<select>
<option></option>
</select>
6、option标签
可用属性：disabled select value
7、optgroup标签
<!--把相关选项组合在一起-->
属性label：给选项组命名
属性disabled：停用该选项组
实例
<select>
<optgroup label="河南省">
<option value="周口">周口</option>
<option>郑州</option>
<option>洛阳</option>
</optgroup>
</select>
标签：编码,标记,标签,元素,html,nbsp,超文本,属性 来源： https://blog.csdn.net/qq_43625917/article/details/86508004
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。