HTML

2020-05-15

文档类型标签、三大标签元素

文档类型标签
<!DOCTYPE>是拿来声明文档的类型，在html文档的第一行编写。作用是告知浏览器的解析器用什么文档标准去解析当前文档。DOCTYPE不存在或格式不正确会导致文档以怪异模式呈现。

组成网页的三大标签元素
<html></html>、<head></head>、<body></body>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> <!-- 当meta标签属性设置为utf-8的时候即可定义网页编码格式为utf-8 -->
    <title>标签定义文档的标题</title>
</head>
<body>
	hello!
</body>
</html>

结构层、表现层、行为层

结构层：HTML(HyperTextMarkup Language)
是一个超文本标记语言、负责描绘出网页内容的架构。

表现层：CSS(Cascading Style Sheets)层叠样式表
负责如何显示结构层的有关内容

行为层：Javascript
JavaScript是目前在Web上使用的最主要的客户端脚本语言
是web脚本语言的一个标准
可以对结构层和表现层的内容随意进行更改

head、body

head
在里面可编写文档元数据、定义文档标题、引入层叠样式表文件、引入js文件、编写css样式。
body
文档的主体部分，编写显示在网页里的内容，编写javascript脚本，引入js文件。

<!DOCTYPE html>
<!--html 文档的根元素 -->
<html>
<!-- head标签作用：在里面可编写文档元数据、定义文档标题、引入层叠样式表文件、引入js文件、编写css样式 -->
<head>
    <meta charset="utf-8">
    <title>我的第一个网页</title>
    <link rel="stylesheet" type="text/css" href="fileName.css">
    <style type="text/css">
    	/*编写css*/
    </style>
    <script type="text/javascript" src="fileName.js"></script>
</head>
<!-- body 文档的主体部分，编写显示在网页里的内容，编写javascript脚本，引入js文件 -->
<body>
	<!-- <script type="text/javascript" src="fileName.js"></script> -->
	<script type="text/javascript">
		//编写js脚本
	</script>
    <p>hello world!</p>
</body>
</html>

注释

css

/*这是单行注释*/
/*
    这是多行注释
    这是多行注释
    这是多行注释
*/

html

<!--这是单行注释-->
<!--
    这是多行注释
    这是多行注释
    这是多行注释
-->

javascript

//这是单行注释
/*
    这是多行注释
    这是多行注释
    这是多行注释
*/

标签元素（构造页面）

div：在网页制作过程中可以把你认为捆绑在一起的东西装在一个里面,div充当的是一个容器的角色
p：如果想在网页上显示文章或段落，这时就需要标签了，把文章或段落放到标签即可。
br：需要加回车换行的地方加入<br/>标签作用相当于word文档中的回车
strong：用粗体表示
em：用斜体表示
span：<span>标签是没有语义的，它的作用就是为了设置单独的样式用的

<!DOCTYPE html>
<html>
<head>
	<title>标签元素介绍一</title>
</head>
<body>
	<div>
		你好
		<p><span style="color: red;">我是soulboy</span>,我这里是文章或者段落，我是<strong>p标签</strong>，<br/>但是在<em>div标签</em>里面，他是一个容器</p>
	</div>
</body>
</html>

ul li：当你网页需要做一个展示信息列表的时候可以使用无序列表
ol li：当你网页需要做一个展示信息列表的时候可以使用有序列表
hx(x可以是1-6)：此标签为标题标签
hr：信息展示时需要分隔的横线时可使用

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- 无需列表 -->
	<ul>
		<li>新闻列表一</li>
		<hr/>
		<li>新闻列表二</li>
		<li>新闻列表三</li>
	</ul>
	<!-- 有序列表 -->
	<ol>
		<li>新闻列表一</li>
		<li>新闻列表二</li>
		<li>新闻列表三</li>
	</ol>
	<!-- hx 分别可以为h1 h2 h3 h4 h5 h6 -->
	<h1>我是h1标签</h1>
	<h2>我是h2标签</h2>
	<h3>我是h3标签</h3>
	<h4>我是h4标签</h4>
	<h5>我是h5标签</h5>
	<h6>我是h6标签</h6>
</body>
</html>

a：实现超链接跳转，只要有链接的地方就可以用此标签此外a标签还可以设置title和target等属性。
<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">click here!</a>
img：美丽的网页图片是一个不可划缺的部分，img可以插入图片如下为使用方式。
<img src="图片地址" alt="下载失败时的替换文本" title="鼠标滑过显示的文本">

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- 这个是跳转链接，可以跳转网址，也可以跳转页面 -->
	<a href="http://www.baidu.com" title="我要跳转到百度" target="_blank">跳转到百度</a>
	<!-- 这个是图片标签 -->
	<img src="1.jpeg" title="我是一张好看的图片" alt="我加载失败了">
</body>
</html>

input：文本输入框，常见的type有（text、radio、checkbox、button、submit、file、password）
textarea：文本输入域，用户需要在表单中输入大段文字时，需要用到
select option：下拉选择 option里面设置selected="selected"即为默认选中
label：label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）使用方式有如下两种：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- input标签 常见的type有text、radio、checkbox、button、submit、file、password -->
	<!-- 输入框 -->
	<input type="text" value="" placeholder="我是提示内容" name="">
	<!-- 单选按钮 -->
	<input type="radio" name="sex">男的
	<input type="radio" name="sex">女的
	<!-- 复选框 -->
	<input type="checkbox" name="">复选框
	<!-- 按钮 button、submit -->
	<input type="button" value="我是按钮" name="">
	<input type="submit" value="提交" name="">
	<input type="file" value="" name="">
	<input type="password" placeholder="我是密码框，你看不到我输入的东西" name="">
	<!-- 文本输入域 -->
	<div>
		文本输入域<textarea style="resize: none;"></textarea>
	</div>
	<!-- 下拉选择框 -->
	<div>
		下拉选择框
		<select>
			<option>我是选择1</option>
			<option>我是选择2</option>
			<option selected="selected">我是选择3</option>
			<option>我是选择4</option>
			<option>我是选择5</option>
		</select>
	</div>
	<!-- label标签的作用 -->
	<div>
		<!-- 第一种使用方式 -->
		 <label for="male">男</label>
  		 <input type="radio" name="sex" id="male" />
  		 <label for="female">女</label>
  		 <input type="radio" name="sex" id="female" />	
  		 <hr>
  		 <!-- 第二种使	用方式 -->
  		 <label>
  		 	男 <input type="radio" name="sex2" />
  		 	女 <input type="radio" name="sex2" />	
  		 </label>
	</div>
</body>  
</html>

表格

table标：用来定义 HTML 表格，可以用作展示数据 border可设置
tr：定义HTML表格中的一行单元格
th：表示HTML表格的表头部分，该标签中的内容会以粗体显示
td：表示table标签中的单元格
thead：定义了一组HTML表格的头
tfoot：定义了一组HTML表格的尾(表格的页脚)

<!DOCTYPE html>
<html>
<head>
	<title>表格演示</title>
</head>
<body>
	<table border="1">
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>身高</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td>名字统计</td>
				<td>岁数统计</td>
				<td>身高统计</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>张三</td>
				<td>21岁</td>
				<td>168cm</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>22岁</td>
				<td>178cm</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

表单

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

* form标签是成对出现的双闭合标签
* action里面传入浏览者输入的数据被传送到的地方，可以是json文件、php文件等等
* method里面传入的是数据传送的方式（get/post）
* 所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在标签之间（否则用户输入的信息可提交不到服务器上的）。
* method : post/get 的区别这一部分内容属于后端程序员考虑的问题。完全取决去后端人员，他会告诉你是以什么方式传输的。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form method="post"  action="目标地址">
		姓名：<input type="text" name="">
		性别：<input type="radio" name="sex">	男 <input type="radio" name="sex">	女
		<input type="submit" name="" value="提交">
	</form>
	<!-- 放在form标签外面的表单元素是不会被提交到服务器端的 -->
	身高：<input type="text" name="">
</body>
</html>

标签元素定位

id
id是全局唯一的，就像身份证号码一样。

class
class可以多个标签元素共用，表示一类元素。

<!DOCTYPE html>
<html>
<head>
	<title>给标签元素一个命名</title>
</head>
<body>
	<div id="tim">我是div</div>
	<p class="yy">我是p标签</p>
	<span class="yy">我是span标签</span>
	<a class="xiaod" href="">我是a标签</a>
	<h1 class="xiaod" id="xiaodh">我是h1</h1>
</body>
</html>

块级元素、行内元素、行内块级元素

块级元素

总是另起一行
可以设置其宽度、高度，内外边距
在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
可以容纳行内元素和其他块元素。
常见的块级元素有：<div>、<h1>~<h6>、<p>、<ul>、<table>等(注意这里只是常见的)

行内元素

总是和相邻的行内元素在同一行上
设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
默认宽度是他自身内容的宽度。
行内元素只能容纳其他行内元素或者文本。
常见的行内元素有：<span>、<a>、<img>、<br>、<input>、<textarea>、<select>、<strong>、<em>等(注意这里只是常见的)

行内块元素

在行内元素中就有那么几个特殊标签，比如<img>、<input>、<td>,可以给他们设置宽高、对齐属性
行内块元素综合了块元素和行内元素的不同特点

* 和相邻行内元素在同一行，但是之间会有空白缝隙。
* 默认宽度是他本身内容的宽度。
* 宽度、高度、行高、外边距以及内边距都可以手动设置。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- 块级元素很霸道。喜欢自己一行，不想跟别人同一行 -->
	<div>我是块级元素，别人不能跟我同一行</div>
	<p>我也是块级，我不喜欢跟别人一行</p>
	<h1>我也是块级元素，我自己一行</h1>
	<!-- 行内元素很好客，喜欢跟其他行内或者行内块级同一行展示 -->
	<span>我是行内元素，</span> 
	<a href="">我也是行内，我想跟你玩</a>
	<strong>我也是行内，我们一起玩</strong>
</body>
</html>

作者：Soulboy