目录

Life in Flow

知不知，尚矣；不知知，病矣。
不知不知，殆矣。

X

HTML

   
    0 0 410686931

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

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

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

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

结构层、表现层、行为层

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

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

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

head、body

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

 1<!DOCTYPE html>
 2<!--html 文档的根元素 -->
 3<html>
 4<!-- head标签作用：在里面可编写文档元数据、定义文档标题、引入层叠样式表文件、引入js文件、编写css样式 -->
 5<head>
 6    <meta charset="utf-8">
 7    <title>我的第一个网页</title>
 8    <link rel="stylesheet" type="text/css" href="fileName.css">
 9    <style type="text/css">
10    	/*编写css*/
11    </style>
12    <script type="text/javascript" src="fileName.js"></script>
13</head>
14<!-- body 文档的主体部分，编写显示在网页里的内容，编写javascript脚本，引入js文件 -->
15<body>
16	<!-- <script type="text/javascript" src="fileName.js"></script> -->
17	<script type="text/javascript">
18		//编写js脚本
19	</script>
20    <p>hello world!</p>
21</body>
22</html>

注释

CSS

1/*这是单行注释*/
2/*
3    这是多行注释
4    这是多行注释
5    这是多行注释
6*/

HTML

1<!--这是单行注释-->
2<!--
3    这是多行注释
4    这是多行注释
5    这是多行注释
6-->

JavaScript

1//这是单行注释
2/*
3    这是多行注释
4    这是多行注释
5    这是多行注释
6*/

标签元素（构造页面）

  • div：在网页制作过程中可以把你认为捆绑在一起的东西装在一个里面,div 充当的是一个容器的角色
  • p： 如果想在网页上显示文章或段落，这时就需要标签了，把文章或段落放到标签即可。
  • br：需要加回车换行的地方加入<br/> 标签作用相当于 word 文档中的回车
  • strong：用粗体表示
  • em：用斜体表示
  • span：<span> 标签是没有语义的，它的作用就是为了设置单独的样式用的
 1<!DOCTYPE html>
 2<html>
 3<head>
 4	<title>标签元素介绍一</title>
 5</head>
 6<body>
 7	<div>
 8		你好
 9		<p><span style="color: red;">我是soulboy</span>,我这里是文章或者段落，我是<strong>p标签</strong>，<br/>但是在<em>div标签</em>里面，他是一个容器</p>
10	</div>
11</body>
12</html>
  • ul li：当你网页需要做一个展示信息列表的时候可以使用 无序列表
  • ol li： 当你网页需要做一个展示信息列表的时候可以使用 有序列表
  • hx(x 可以是 1-6)：此标签为标题标签
  • hr：信息展示时需要分隔的横线时可使用
 1<!DOCTYPE html>
 2<html>
 3<head>
 4	<title></title>
 5</head>
 6<body>
 7	<!-- 无需列表 -->
 8	<ul>
 9		<li>新闻列表一</li>
10		<hr/>
11		<li>新闻列表二</li>
12		<li>新闻列表三</li>
13	</ul>
14	<!-- 有序列表 -->
15	<ol>
16		<li>新闻列表一</li>
17		<li>新闻列表二</li>
18		<li>新闻列表三</li>
19	</ol>
20	<!-- hx 分别可以为h1 h2 h3 h4 h5 h6 -->
21	<h1>我是h1标签</h1>
22	<h2>我是h2标签</h2>
23	<h3>我是h3标签</h3>
24	<h4>我是h4标签</h4>
25	<h5>我是h5标签</h5>
26	<h6>我是h6标签</h6>
27</body>
28</html>
  • a：实现超链接跳转，只要有链接的地方就可以用此标签 此外 a 标签还可以设置 title 和 target 等属性。
    <a href="目标网址" title="鼠标滑过显示的文本" target="_blank">click here!</a>
  • img：美丽的网页图片是一个不可划缺的部分，img 可以插入图片 如下为使用方式。
    <img src="图片地址" alt="下载失败时的替换文本" title="鼠标滑过显示的文本">
 1<!DOCTYPE html>
 2<html>
 3<head>
 4	<title></title>
 5</head>
 6<body>
 7	<!-- 这个是跳转链接，可以跳转网址，也可以跳转页面 -->
 8	<a href="http://www.baidu.com" title="我要跳转到百度" target="_blank">跳转到百度</a>
 9	<!-- 这个是图片标签 -->
10	<img src="1.jpeg" title="我是一张好看的图片" alt="我加载失败了">
11</body>
12</html>
  • input：文本输入框，常见的 type 有（text、radio、checkbox、button、submit、file、password）
  • textarea：文本输入域，用户需要在表单中输入大段文字时，需要用到
  • select option：下拉选择 option 里面设置 selected="selected"即为默认选中
  • label：label 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该 label 标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该 label 标签相关连的表单控件上） 使用方式有如下两种：
 1<!DOCTYPE html>
 2<html>
 3<head>
 4	<title></title>
 5</head>
 6<body>
 7	<!-- input标签 常见的type有text、radio、checkbox、button、submit、file、password -->
 8	<!-- 输入框 -->
 9	<input type="text" value="" placeholder="我是提示内容" name="">
10	<!-- 单选按钮 -->
11	<input type="radio" name="sex">男的
12	<input type="radio" name="sex">女的
13	<!-- 复选框 -->
14	<input type="checkbox" name="">复选框
15	<!-- 按钮 button、submit -->
16	<input type="button" value="我是按钮" name="">
17	<input type="submit" value="提交" name="">
18	<input type="file" value="" name="">
19	<input type="password" placeholder="我是密码框，你看不到我输入的东西" name="">
20	<!-- 文本输入域 -->
21	<div>
22		文本输入域<textarea style="resize: none;"></textarea>
23	</div>
24	<!-- 下拉选择框 -->
25	<div>
26		下拉选择框
27		<select>
28			<option>我是选择1</option>
29			<option>我是选择2</option>
30			<option selected="selected">我是选择3</option>
31			<option>我是选择4</option>
32			<option>我是选择5</option>
33		</select>
34	</div>
35	<!-- label标签的作用 -->
36	<div>
37		<!-- 第一种使用方式 -->
38		 <label for="male">男</label>
39  		 <input type="radio" name="sex" id="male" />
40  		 <label for="female">女</label>
41  		 <input type="radio" name="sex" id="female" />	
42  		 <hr>
43  		 <!-- 第二种使	用方式 -->
44  		 <label>
45  		 	男 <input type="radio" name="sex2" />
46  		 	女 <input type="radio" name="sex2" />	
47  		 </label>
48	</div>
49</body>  
50</html>

表格

  • table 标：用来定义 HTML 表格，可以用作展示数据 border 可设置
  • tr：定义 HTML 表格中的一行单元格
  • th：表示 HTML 表格的表头部分，该标签中的内容会以粗体显示
  • td：表示 table 标签中的单元格
  • thead：定义了一组 HTML 表格的头
  • tfoot：定义了一组 HTML 表格的尾(表格的页脚)
 1<!DOCTYPE html>
 2<html>
 3<head>
 4	<title>表格演示</title>
 5</head>
 6<body>
 7	<table border="1">
 8		<thead>
 9			<tr>
10				<th>姓名</th>
11				<th>年龄</th>
12				<th>身高</th>
13			</tr>
14		</thead>
15		<tfoot>
16			<tr>
17				<td>名字统计</td>
18				<td>岁数统计</td>
19				<td>身高统计</td>
20			</tr>
21		</tfoot>
22		<tbody>
23			<tr>
24				<td>张三</td>
25				<td>21岁</td>
26				<td>168cm</td>
27			</tr>
28			<tr>
29				<td>李四</td>
30				<td>22岁</td>
31				<td>178cm</td>
32			</tr>
33		</tbody>
34	</table>
35</body>
36</html>

表单

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

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

 1<!DOCTYPE html>
 2<html>
 3<head>
 4	<title></title>
 5</head>
 6<body>
 7	<form method="post"  action="目标地址">
 8		姓名：<input type="text" name="">
 9		性别：<input type="radio" name="sex">	男 <input type="radio" name="sex">	女
10		<input type="submit" name="" value="提交">
11	</form>
12	<!-- 放在form标签外面的表单元素是不会被提交到服务器端的 -->
13	身高：<input type="text" name="">
14</body>
15</html>

标签元素定位

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

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

 1<!DOCTYPE html>
 2<html>
 3<head>
 4	<title>给标签元素一个命名</title>
 5</head>
 6<body>
 7	<div id="tim">我是div</div>
 8	<p class="yy">我是p标签</p>
 9	<span class="yy">我是span标签</span>
10	<a class="xiaod" href="">我是a标签</a>
11	<h1 class="xiaod" id="xiaodh">我是h1</h1>
12</body>
13</html>

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

块级元素

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

行内元素

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

行内块元素

  • 在行内元素中就有那么几个特殊标签，比如 <img>、<input>、<td>,可以给他们设置宽高、对齐属性
  • 行内块元素综合了块元素和行内元素的不同特点
1* 和相邻行内元素在同一行，但是之间会有空白缝隙。
2* 默认宽度是他本身内容的宽度。
3* 宽度、高度、行高、外边距以及内边距都可以手动设置。

 1<!DOCTYPE html>
 2<html>
 3<head>
 4	<title></title>
 5</head>
 6<body>
 7	<!-- 块级元素很霸道。喜欢自己一行，不想跟别人同一行 -->
 8	<div>我是块级元素，别人不能跟我同一行</div>
 9	<p>我也是块级，我不喜欢跟别人一行</p>
10	<h1>我也是块级元素，我自己一行</h1>
11	<!-- 行内元素很好客，喜欢跟其他行内或者行内块级同一行展示 -->
12	<span>我是行内元素，</span> 
13	<a href="">我也是行内，我想跟你玩</a>
14	<strong>我也是行内，我们一起玩</strong>
15</body>
16</html>
作者：Soulboy