「学习笔记」HTML基础

一、认识WEB

Web标准

「构成」👉 结构标准，表现标准和行为标准

  • 结构标准用于对网页元素进行整理和分类(HTML)
  • 表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)
  • 行为标准用于对网页模型的定义及交互的编写(JavaScript)

二、HTML简介

HTML初识

「HTML」：超文本标记语言

「所谓超文本，有2层含义：」

  • 因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）
  • 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

「HTML骨架格式」

1
2
3
4
5
6
7
8
9
10
11
<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

「团队约定大小写」

  • HTML标签名、类名、标签属性和大部分属性值统一用小写

「HTML元素标签分类」

  • 常规元素(双标签)
  • 空元素(单标签)
1
2
3
4
5
常规元素(双标签)
<标签名> 内容 </标签名>   比如<body>我是文字</body>

空元素(单标签)
<标签名 />  比如 <br />或<br>

「HTML标签关系」

  • 嵌套关系父子级包含关系

  • 并列关系兄弟级并列关系

  • 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

文档类型

「文档类型」

页面语言lang

lang指定该html标签内容所用的语言

1
2
<html lang="en">  
en 定义语言为英语 zh-CN定义语言为中文

字符集

「字符集」

  • UTF-8是目前最常用的字符集编码方式
  • 让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。
1
<meta charset="UTF-8" />

HTML标签的语义化

「拓展」 标签：规定页面上所有链接的默认 URL 和设置整体链接的打开状态

1
2
3
4
5
6
7
<head>
    <base href="http://www.baidu.com" target="_blank">
    <base target="_self">
</head>
<body>
    <a href="">测试</a> 跳转到 百度
</body>

HTML常用标签

「1. 排版标签」主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

  • 标题标签h(h1~h6)
  • 段落标签p,可以把 HTML 文档分割为若干段落
  • 水平线标签hr
  • 换行标签br
  • div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。

「2. 排版标签」

  • b和strong 文字以粗体显示
  • i和em 文字以斜体显示
  • s和del 文字以加删除线显示
  • u和ins 文字以加下划线显示

「3. 标签属性(行内式)」

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。

1
2
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸">  </手机>

「4. 图像标签img」

crhmo8.png

注意：

  • 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  • 采取 键值对 的格式 key=”value” 的格式
1
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" />

「5. 链接标签(重点)」

1
2
3
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target="_self"  默认窗口弹出方式
target="_blank" 新窗口弹出
属性 作用
href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

src 和 href 的区别

一句话概括:src 是引入资源的 href 是跳转url的

注意：

  1. 外部链接 需要添加 http:// www.baidu.com
  2. 内部链接 直接链接内部页面名称即可 比如 < a href=”index.html”> 首页
  3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=”#”)，表示该链接暂时为一个空链接。
  4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位：通过创建锚点链接，用户能够快速定位到目标内容。

1
2
3
4
5
1. 使用相应的id名标注跳转目标的位置。 (找目标)
  <h3 id="two">第2集</h3> 

2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） 
  <a href="#two">

「6. 注释标签」

1
2
3
<!-- 注释语句 -->     
 快捷键是：    ctrl + /       
 或者 ctrl +shift + /

团队约定：注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

「7. 路径」

1.绝对路径：可直接调用该网址，如：https://www.baidu.com

​ 注意：绝对路径必须加https：//

2.相对路径：所到达地址必须与当前html文档相邻（同级或下级或上级）

  • 同级：可直接访问，如img src =”baidu.jpg”

  • 下级：加/访问，如img src =”images/baidu.jpg” 注：其中images是包含image的且与html文件同级的

  • 上级，加../访问，如img src =”../baidu.jpg”

csApuj.png

特殊字符：

crhZeP.png

表格

「1. 创建表格」

1
2
3
4
5
6
7
<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

table、tr、td，他们是创建表格的基本标签，缺一不可

  • table用于定义一个表格标签。

  • tr标签 用于定义表格中的行，必须嵌套在 table标签中。

  • td 用于定义表格中的单元格，必须嵌套在标签中。

  • 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。

    cskO4f.png]

表头单元格标签th: 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签替代相应的单元格标签即可。

crhELt.png

表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。

1
2
3
<table>
   <caption>我是表格标题</caption>
</table>

「3. 表格属性」

cskv8S.png

三参为0，平时开发的我们这三个参数 border cellpadding cellspacing 为 0

「4. 合并单元格」,合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格。

  • 跨行合并：rowspan=”合并单元格的个数”
  • 跨列合并：colspan=”合并单元格的个数”

「5. 总结表格」

csA9Ds.png

「6. 表格划分结构」

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构。

注意：

1
1.<thead></thead>用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有<tr> 标签！
1
2.<tbody></tbody>用于定义表格的主体。放数据本体 。
1
3.<tfoot></tfoot>放表格的脚注之类。
1
4.以上标签都是放到table标签中。

列表

「列表ul」容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。

列表最大的特点就是整齐 、整洁、 有序，跟表格类似，但是它可组合自由度会更高。

「1. 无序列表 ul」

列表项之间为兄弟关系。

1
2
3
4
5
6
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

「2. 有序列表 ol」

自动按照顺序有序排列，前有序号1.2.3.。。

1
2
3
4
5
<ol type="A"> 
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

「3. 自定义列表 dl」定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

注意：dt和dd之间为兄弟关系，一个dl一般包含一个dt和多个dd。

1
2
3
4
5
6
7
8
9
10
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

crhuFS.png

表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。

crhKJg.png表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

「1. input 控件」

1
<input type="属性值" value="你好">
  • input 输入的意思
  • 标签为单标签
  • type属性设置不同的属性值用来指定不同的控件类型
  • 除了type属性还有别的属性

常用属性：

crhMWQ.png

1
2
用户名: <input type="text" /> 
密  码：<input type="password" />

value属性

  • value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。
1
用户名:<input type="text"  name="username" value="请输入用户名">

name属性

  • name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。

    • name属性后面的值，是我们自己定义的。
    • radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
    • name属性，我们现在用的较少，但是，当我们学ajax 和后台的时候，是必须的。
1
2
<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

checked属性

  • 表示默认选中状态。 较常见于 单选按钮和复选按钮。
1
2
3
性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

input 属性小结

属性 说明 作用
type 表单类型 用来指定不同的控件类型
value 表单值 表单里面默认显示的文本
name 表单名字 页面中的表单很多，name主要作用就是用于区别不同的表单。
checked 默认选中 表示那个单选或者复选按钮一开始就被选中了

「2. label标签」

  • label 标签为 input 元素定义标注（标签）。
  • label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

如何绑定元素呢

  • 第一种用法就是用label标签直接包含input表单， 适合单个表单选择
  • 第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。
1
2
3
4
5
6
7
8
第一种
<label> 用户名： 
  <input type="radio" name="usename" value="请输入用户名">   
</label>

第二种
<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

「3. select下拉列表」

  • 如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
  • 在option 中定义selected =” selected “时，当前项即为默认选中项。
  • 我们实际开发会用的比较少

cskxgg.png

1
2
3
4
5
6
7
<select>
  
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

「4. textarea控件(文本域)」

  • 通过textarea控件可以轻松地创建多行文本输入框.
  • cols=”每行中的字符数” rows=”显示的行数” 我们实际开发不用

csAiEq.png

1
2
3
<textarea >
  文本内容
</textarea>

文本框和文本域区别

表单 名称 区别 默认值显示 用于场景
input type=”text” 文本框 只能显示一行文本 单标签，通过value显示默认值 用户名、昵称、密码等
textarea 文本域 可以显示多行文本 双标签，默认值写到标签中间 留言板

三：HTML汇总

基本结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--注释内容-->//注释标签用来在源文档中插入注释，注释会被浏览器忽略。

<html>//html元素可告知浏览器这是一个html类型的文档。

	<head>//定义在html语言头部的内容不会在网页上直接显示，它用于包含当前文档的相关信息，可以包含title元素、meta元素等。

		<title></title>//页面标题元素。
　　
		<meta name="信息名称" content="内容1，内容2" />//meta元素用来定义页面的附加信息，其中包括页面的作者、版权、关键字等信息。
        
		<style type="text/css"></style>//编写css代码。
　　
		<link href="xx.css" rel="stylesheet" type="text/css" />//引用外部css代码。
　　
		<link href="xx.ico" rel="Shortcut Icon" />//在标题栏添加图片。
        
		<script type="text/javascript"></script>//编写javascript代码。
　　
		<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>//引用外部javascript代码。
    
	</head>
    
	<body></body>//body元素定义文档的主体，它包含文档的所有内容(比如文本、图像、颜色和图形等等)。
    
</html>

HTML标签元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<div></div>//在页面中div元素用来将页面内容分割成各个独立的部分。在每个div元素中，不仅可以包含文本内容，也可以包含图片、表单等。

<p></p>//用来定义一个段落。在p元素中，可以包含文本、图片和用来修饰文本的元素。

<br />//用来使文本换行显示。

<hr />//用一条一定高度的分隔线，分隔页面内容。

<blockquote></blockquote>//缩进显示。

<pre></pre>//用来定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。

<address></address>//用来在内容中定义地址的相关内容。

<b></b>//用来使包含的文本内容加粗显示。

<small></small>//用来使包含的文本内容缩小一号显示。

<i></i>//用来使包含的文本内容以斜体方式显示。

<sup></sup>//用来使包含的文本内容以上标的方式显示。

<sub></sub>//用来使包含的文本内容以下标的方式显示。

<em></em>//用来强调内容，一般被强调的部分会以斜体显示。

<strong></strong>//用来强调内容，一般被强调的部分会加粗显示。

<a href="#1" target="_blank"></a>//用来链接一个目标，_blank表示目标页面在新的窗口显示。

<a href="http://www.xxx.com"></a>//HTTP路径

<a href="ftp://www.xxx.com"></a>//FTP路径

<a href="mailto:xxx@sina.com"></a>//邮件路径，用来链接一个电子邮件的地址。

<img src="#" alt="Alternate Text" />//用来在页面中定义一个图片。路径属性src用来定义一个调用图片的
路径，代替图片的文本属性alt用来定义当图片路径错误或者其它原因无法显示时，替代图片的文本。

<img src="naruto.ico"     alt="picture" width="258" border="0" usemap="#Map"  /><!-- 图像的局部链接 -->
    <map name="Map" id="Map">
      <area shape="poly" coords="83, 161, 152, 164, 114, 86" href="#" />
      <area shape="circle" coords="181, 73, 41" href="#" />    
　　</map>

<form action="/" method="post"></form>//用来创建一个表单。

action:用来指定当提交表单时向何处发送表单数据。method:用来指定如何发送表单数据，可取值为get或者post。

get：以URL变量的形式来发送。post:以HTTP post的形式来发送。

<input type="text" id="name" name="name" value="" /> //用来提供用户输入文本的功能，只能单行显
示，超出定义宽度的内容将被隐藏。

<input type="password" id="name" name="name" value="" />//用来提供输入密码。

<input type="submit" id="name" name="name" value="" />//用来发送表单中的内容。

<input type="reset" id="name" name="name" value="" />//用来重置表单中的内容。

<input type="image" id="name" name="name" value="" />//用来发送表单中的内容。

<input type="button" id="name" name="name" value="" />//用来激活相应的行为。

<input type="checkbox" id="name" name="name" value="" />//用来提供用户多项选择的功能。

<input type="radio" id="name" name="name" value="" />//用来提供用户单项选择的功能。

<input type="hidden" id="name" name="name" value="" />//用来隐藏表单控件的内容。

<textarea rows="10" cols="10"></textarea>//用来提供用户输入文本的功能，多行显示。

<label for="id"></label>//用来定义一个关联的标记。

<iframe src=""></iframe>//用来在页面中定义一个框架区域。

<select>//用来在页面中定义一个可以选择的下拉列表。
    <optgroup label="">//用来定义下拉列表中的项目的分组。
       <option value=""></option>//用来定义下拉列表中的项目。
    </optgroup>
</select>

<fieldset>//将表单内的元素分组。
    <legend></legend>//定义元素标题。
</fieldset>

<ul>//无序列表元素，用来定义没有顺序编号的列表元素。
     <li></li>//用来定义列表中的条目。
</ul>

<ol>//有序列表元素，用来定义有顺序编号的列表元素。
    <li></li>
</ol>

<dl>//用来定义类似术语或者词汇表的列表信息。
    <dt></dt>//用来定义dl元素中的一个具体的条目，可以在dt元素中使用文本或者图片等。
    <dd></dd>//用来定义dl元素中的一个具体的条目说明，可以在dd元素中使用其它的列表元素。
</dl>

<table border="0" cellspacing="0" cellpadding="0" width="100%" >//用来在页面中定义一个表格。
border:定义边框宽度。cellspacing:定义单元格之间的间距。cellpadding:定义单元格与其中的内容之间的间距。width:定义表格宽度。

	<caption></caption>//定义表格的标题。

	<thead></thead>//定义表格的表头。

	<tbody>//定义表格的主体。
    	<tr>//用来定义表格的行。
        	<td></td>//用来定义表格的单元格。
   		</tr>
	</tbody>

	<tfoot></tfoot>//定义表格的表尾。

</table>