前端基础学习html部分小结
1 了解知识
1.1 网页的组成
html(Hyper Text Markup Language)指的是超文本标记语言,可以加入图片、声音、动画、多媒体等内容。还可以从一个文件跳到另一个文件,即超链接,与全世界共通。
1.2 常用的浏览器
-
浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐、谷歌、safari、Opera。
-
浏览器内核(渲染引擎):负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。
-
目前流行的浏览器内核为Webkit(Safari)、Blink(chrome、opera)。
1.3 Web标准(重点)
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际著名的标准化组织。
Web标准主要包括结构(structure)、表现(Presentation)和行为(Behavior)三个方面。
-
结构:结构用于对网页元素进行整理和分类,现阶段主要学的是HTML。
-
表现:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。
-
行为:行为是指网页模型的定义及交互的编写,现阶段主要学的是Javascript。
Web标准提出的最佳体验方案:结构、表现、行为相分离。
2 html语法规则
2.1 基本语法
2.1.1 HTML标签是由尖括号包围的关键词,例如<html>
2.1.2 HTML标签通常是成对出现的,例如<html>和</html>,我们称之为双标签,标签对中的第一个标签是开始标签,第二个标签是结束标签。
2.1.3 有些特殊的标签必须是单个标签(极少情况),例如,<br>我们称之为单标签。也可简写为<br/>
2.2 标签关系
双标签关系分为两类:包含关系和并列关系。
3 HTML基本结构标签
3.1 第一个HTML网页
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。
<!DOCTYPE html>
<!--
不是HTML标签,是文档类型声明标签,必须写在文档最前面,处于<html>标签之前,作用是告诉浏览器使用的哪种HTML版本来显示网页。此处为HTML5。
-->
<html language="en">
<!--
HTML标签:页面中最大的标签,我们称之为根标签
language为语言种类。en定义语言为英文(英文网页),zh-CN定义语言为中文(中文网页)。这个属性对浏览器和搜索引擎有作用,辨别是哪国网页,本页面需要采用什么语言显示。
-->
<head>
<!--head标签,是文档的头部:注意在head标签中我们必须要设置的标签是title-->
<meta charset="UTF-8">
<!--
字符集(character set)是多个字符的集合。以便于计算机能够识别和存储各种文字通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。常用值为G2312(简中)、BIG5(繁体中文)、GBK(简繁均有)、UTF-8(万国码,基本包含全世界所有国家需要用的字符)。
-->
<title>
<!--title标签,是文档的标题:让页面拥有一个属于自己的标题-->
</title>
<body>
<!--body标签,文档的主体:元素包含文档的所有内容,页面内容基本都是放在body里面-->
</body>
</html>
4 HTML常用标签
4.1 标题标签<h1>-<h6>
标签语义:作为标题使用,并且依据重要性递减。
4.2 段落标签<p></p>
标签语义:(paragraph)标签用于定义段落,可以将整个网页文档分为若干个段落。
文本在一个段落中会根据浏览器窗口的大小自动换行,且段落与段落之前保有空隙。
4.3 换行标签<br>
标签语义:(break)强制换行。
是一个单标签,只是一个简单的另起一行,中间不会和段落一样有很大的垂直间距。
注:<hr/>是水平线标签,且单标签在h5标准下不允许省略结束标签。
4.4 文本格式化标签
标签语义:突出重要性,比普通文字更重要。
-
加粗:<strong></strong>或<b></b>
-
倾斜:<em><em/>或<i></i>
-
删除线:<del><del/>或<s><s/>
-
下划线:<ins><ins/>或<u><u/>
4.5 <div>和<span>标签
没有语义,他就是一个盒子,用来装内容。division:分割、分区,span:跨度、跨区。
-
div标签用来布局,但是一行只能放一个div,可以看作一个大盒子。
-
span标签用来布局,一行可以放多个span,可以看作一个小盒子。
4.6 图像标签
标签语义:用于定义HTML页面中的图像。
<img src="C:\Users\ASUS\Desktop\前端基础第一天.html\笔记\图像URL">
图像标签的属性
src:图片路径,为必须属性。用于指定图像文件的路径和文件名。
alt:文本,替换文本。图像不能显示时,显示的文字。
title:文本,提示文本。鼠标放在图像上,显示的文字。
width:像素,设置图像的宽度。
height:像素,设置图像的高度。
border:像素,设置图像的边框粗细。
图像标签可以拥有多个属性,属性不分先后顺序,必须写在标签名的后面,以空格分开,键值对的格式。
4.7 路径
目录文件夹和根目录
目录文件夹就是普通文件夹,只不过里面存放了网页所需要的相关素材,比如图片、HTML文件。
根目录就是打开目录文件夹的第一层就是根目录。
路径分类
相对路径:以引用文件所在的位置为参考基础,即图片相对于HTML页面的位置(使用反斜杠)。
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。但是每台设备的绝对路径不一致,很少使用该方式。(使用正斜杠)。
补充:网络中的绝对地址也可以使用。
4.8 超链接标签
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
a为单词anchor的缩写,意为锚。
超链接标签属性
href:用于指定链接目标的url地址,(必须属性)当为标签应用herf属性,才具备超链接功能。
target:用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口打开方式。
链接分类
-
外部链接:
<a href="http://www.qq.com" target="_self">当前窗口腾讯</a>
-
内部链接:网站内部页面之间的相互链接,语法格式为
<a href="05-HTML常用标签联系.html" target="_blank">盲盒新闻</a>
-
空链接:如果当时没有确定链接目标时,语法格式为
<a href="#" target="_blank">空链接</a>
-
下载链接:地址链接的是文件.exe或者是.zip等压缩文件会下载该文件,语法格式为
<a href="img.zip" target="_blank">下载文件</a>
-
网页元素的链接:在网页中的各种网页元素,如文本,图像,表格,音频,视频等都可以添加超链接,语法格式为
<a href="http://www.baidu.com" target="_blank"><img src="C:\Users\ASUS\Desktop\前端基础第一天.html\笔记\img.png" title="百度"></a>
-
锚点链接:点击链接,可以快速定位到当前页面的特定位置,语法格式为
<h4 id="six"> <a href="#six">锚点链接</a>
在链接文本的href属性中,设置属性值为#名字的形式。找到目标位置标签,里面添加一个id属性=刚才的名字。
5 HTML中的注释和特殊字符
5.1 注释
注释的语法格式
<!--注释内容-->
以<!–开头,以–>结尾。 快捷键为 Ctrl+反斜杠。
5.2 特殊字符
HTML 原代码 | 显示结果 | 描述 |
---|---|---|
< | < | 小于号或显示标记 |
> | > | 大于号或显示标记 |
& | & | 可用于显示其它特殊字符 |
" | “ | 引号 |
® | ® | 已注册 |
© | © | 版权 |
™ | ™ | 商标 |
  | 半个空白位 | |
  | 一个空白位 | |
| 不断行的空白 |
6 表格标签
用于显示、展示数据。
6.1 表格的基本语法
表格的语法格式
<table>
<!--表格-->
<tr>
<!--表格行标签-->
<td>
<!--表格单元格标签-->
</td>
</tr>
</table>
6.2 表头单元格
将<tr>替换成<th>(table head),会加粗并居中显示.
6.3 表格属性(一般通过CSS设置)
属性 | 属性值 | 描述 |
---|---|---|
align | left,center,right | 规定表格相对周围元素的对齐方式 |
border | 1或"" | 规定表格单元是否拥有边框,默认为没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
height | 像素值或百分比 | 规定表格的高度 |
6.4 表格结构标签
<thead></thead>:用于定义表格头部,内部必须拥有<tr>标签,一般是第一行
<tbody></tbody>:用于定义表格主体,主要用于存放数据本体。
6.5 合并单元格
跨行合并:rowspan=“合并单元格的个数”。以最上侧单元格为目标单元格。
跨列合并:clospan=“合并单元格的个数”。以最左侧单元格为目标单元格。
注意:在<td>标签中添加。
7 列表标签
列表就是用来布局的。
7.2 无序列表
无序列表的语法格式
<ul>
<li>标签表示HTML页面中项目的无序列表,列表项以<li>标签定义</li>
<li>列表项1</li>
<li>列表项2</li>
</ul>
-
无序列表的列表项之间没有顺序之分是并列的,且<ul>里只能放<li>,<li>可以放任何元素。
-
无序列表有自己的样式属性,但实际开发中通常由css进行开发。
7.2 有序列表
有序列表的语法格式
<ol>
<li>标签表示HTML页面中项目的有序列表,列表项以<li>标签定义</li>
<li>列表项1</li>
<li>列表项2</li>
</ol>
-
在<ol>里只能放<li>,<li>可以放任何元素。
-
有序列表有自己的样式属性,但实际开发中通常由css进行开发。
7.3 自定义列表
自定义列表的语法格式
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
- 在<dl>里只能放<dt><dd>,<dt><dd>可以放任何元素。
8 表单标签
用于收集用户信息。
8.1 表单的组成
一个完整的表单通常由表单域、表单控件(表单元素)和提示信息三部分组成。
8.2 表单域
表单域是一个包含表单元素的区域,表单域的语法格式
<from action="url地址" method="提交方式" name="表单域名称">
表单域会把它范围内的表单元素信息提交给服务器。
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的URL地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一个页面的多个表单域 |
注意:写表单元素之前,要先有个表单域把他们包含;表单域就是。
8.3 表单控件(表单元素)
8.3.1 input输入表单元素
语法格式为
<input type="属性值">
-
<input/>标签是单标签,也可写作<input>。
-
type属性设置不同的属性值用来指定不同的控件类型。
type属性的属性值
button:定义可点击按钮(多数情况下,可以通过JavaScript启动脚本)。
checkbox:定义复选框。
file:定义输入字段和“浏览”按钮,供文件上传。
hidden:定义隐藏的输入字段。
image:定义图像形式的提交按钮。
password:定义密码字段。该字段中的字符被掩码。
radio:定义单选按钮。
reset:定义重置按钮。重置按钮会清除表单中的所有数据。
submit:定义提交按钮。提交按钮会把表单数据发送到服务器。
text:定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。
input输入表单标签属性
属性 | 属性值 | 描述 |
---|---|---|
type | 输入框类型 | 定义input方式 |
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
实例
<form action="xxx.php" method="get">
<!-- 文本框 用户可以看到输入内容 -->
用户名:
<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- 密码框 用户不可以看到输入内容 -->
密 码:
<input type="password" name="pwd"> <br>
<!-- radio 单选按钮 可以实现多选一 -->
性 别:
<label for="nan">男</label> <input type="radio" name="sex" value="男" checked="checked" id="nan">
<label for="nv">女</label> <input type="radio" name="sex" value="女" id="nv"> <br>
<!-- checkbox 勾选框 可以实现多选效果 -->
爱 好:
吃饭<input type="checkbox" name="hobby" value="eating" checked="checked">
睡觉<input type="checkbox" name="hobby" value="sleeping">
打豆豆<input type="checkbox" name="hobby" value="bitdoudou"> <br>
<!-- 点击提交按钮,可以把表单域中的所有表单元素提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 点击重置按钮,还原表单域中的初始设置 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 ,后期结合js搭配使用-->
<input type="button" value="获取短信验证码">
<!-- 上传文件 -->
<input type="file">
</form>
注意:name和value是每个表单元素都由的属性值,主要给后台人员使用。单选按钮和勾选框要有相同的name值。
8.3.2
<label>标签为input元素定义标注(标签)
<label>标签用于绑定一个表单元素
8.3.3 下拉元素标签
下拉元素标签语法格式
<select>
<option>选项一</option>
<option selected="selected">选项二</option>
</select>
8.3.4**文本域标签**
文本域标签语法格式
<textarea>
初始内容
</textarea>