前端基础——HTML基础
前端基础——HTML
- HTML基础
- 1.HTML标题
- 2.HTML段落
- 3.HTML链接
- 4.HTML图片
- 5.HTML表格
- 6.HTML列表
- 7.HTML表单
- 8.HTML框架
- HTML属性
- HTML结构
- 总结
HTML简介
HTML：超文本标记语言（HyperText Markup Language，简称：HTML）是用来构建网页的标准标记语言。
HTML基础
1.HTML标题
HTML标题是通过 h1-h6 标签来定义的。
标题大小有h1至h6递减。且1-6号标题大小与1-6号字体逆序对应。
<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>
<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>
<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>
<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>
<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>
<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>
标题标签仅仅应用与标题，不要为了生成粗体或大号字体使用标题。
各大搜索引擎使用标题对网页的结构和内容制定索引，滥用标题会是搜索引擎对网页搜索捕捉产生问题。
2.HTML段落
HTML段落是通过 p 标签来定义的。
如果在不想建立新段落的情况下进行换行，可以使用br标签进行换行
<p>这个<br>段落<br>分行</p>
很多浏览器及时p标签只有开始标签也可以识别，但有时会产生意想不到的意外。所以尽量将开始结束标签写全。
3.HTML链接
HTML链接 a 标签来定义的。
在a标签中使用href属性来描述链接的网址
超链接在默认样式下以下列形式出现：
1.一个未访问过的链接显示为蓝色字体并带有下划线。
2.访问过的链接显示为紫色并带有下划线。
3.点击链接时，链接显示为红色并带有下划线
4.HTML图片
HTML中图片通过 img 标签来定义
img标签是单标签，它仅仅包含属性，并没有闭合标签
要显示的图片需要使用src属性，src是“source”，属性值是图片的URL地址。
alt属性可以对未加载的图片进行替换，告诉用户图片信息，有助于更好的显示网页信息。
<img src="图片的url" alt="提示信息">
5.HTML表格
表格由 table 标签来定义，表格中行由 hr 定义，每行分为若干单元格由 td 定义。数据单元格可以包含文本、图片、列表、段落等等。
表格中如果不定义边框属性，表格将不显示边框，大多数时候我们希望有边框可以使用border属性进行定义。
表格中使用th对表格的表头进行生命，大多数浏览器会对表头内容进行着重显示。
<table border="1">
<tr>
<th>表头 1</th>
<th>表头 2</th>
</tr>
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
</tr>
</table>
6.HTML列表
HTML中列表分为有序、无序和自定义列表。
有序列表使用 ol 标签进行声明；
<ul>
<li>11</li>
<li>22</li>
</ul>
无序列表使用 ul 标签进行声明；
<ol>
<li>11</li>
<li>22</li>
</ol>
自定义列表使用 dl 标签进行声明，每个自定义列表项以 dt 标签开始，每个自定义列表项的内容以 dd 开始。
<dl>
<dt>1-1</dt>
<dd>- 1111111</dd>
<dt>1-2</dt>
<dd>- 2222222</dd>
</dl>
7.HTML表单
表单并不是某一个元素，而是包含表单元素的一个区域。
表单使用 form 标签来设置；
input 标签是最常用的表单元素，通过type属性进行设定类型，如text文本框，password密码框，radio单选按钮等等。其中submit属性特别注意，他是将表单区域中所有的表单元素内容进行提交。
<form>
Text: <input type="text" name="text"><br>
Password: <input type="password" name="pwd">
<input type="radio" name="sex" value=1>1<br>
<input type="radio" name="sex" value=2>2
</form>
还有很多表单元素这里不一一列出了。
8.HTML框架
HTML中可以是使用 iframe 标签是浏览器窗口中显示多个页面。个人认为并不常用。
<iframe src="URL" width="200" height="200" frameborder="1"></iframe>
HTML属性
HTML可以设置属性，属性可以在元素中添加额外的附加信息，属性一般在开始标签中添加，属性一般以属性名=属性值的形式出现，比如id=‘id’
各标签具体属性可参考：HTML标签参考手册
个人感觉这个网站还是挺全的。
HTML结构
head标签包含了素有头部标签元素，可以插入脚本（script）、样式（css）、各种meta信息，
也可以添加其他元素标签title style等等。简单的结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
<script>
脚本内容......（也就是js）
</script>
</html>
总结
以上是HTML的一些基础知识，不包含HTML5，是我第一次写博客，后续会有自己的个人学习的前端知识，希望各位大佬指出问题，也欢迎交流。