目录
1.1 排版标签
(1)标题标签 --> 双标签
分类总共有六级, 分别是h1-h6,加了标题的文字会变得加粗, 并且字体按照h6-h1的顺序依次变大增粗, 形式是<h></h>
(2)段落标签p --->paragraph 双标签
顾名思义, 就是把html分成若干个段落, 形式是<p>文本内容</p>。
(3)水平线标签hr --> horizontal 单标签
<hr />创建的是一条横跨网页水平线的标签,但是是一个单标签。
(4)换行标签br --> break 单标签
在HTML中, 一个段落的文字会从左到右依次排列, 知道浏览器窗口的右端, 然后自动换行, 如果希望文字某段强制换行显示, 就需要使用换行标签, 形式是< /br>。
(5)div和span标签
div和span本身是没有语义的, 是我们进行页面布局的主要的两个盒子。
div即division的缩写, 是分割,分区的意思, 由很多的div组成我们的网页;span, 意为跨度, 跨距, 范围
语法格式:<div>这是头部</div>, <span>今日价格</span>
区别:
(1).div标签是用来布局的,但是在一行之中只能放置一个div的标签。
(2).span标签也是用来布局的, 但是一行上可以放置多个span标签。
1.2 文本格式化标签
字体加粗标签 --> 双标签
为bold的缩写, 即是文字以粗体的方式显示(XHTML推荐使用strong), 格式是<b>文字内容</b>和<strong>文字内容</strong>。
需要注意的是, b标签仅仅是加粗, 但是strong除了加粗还有强调的意思, 语义更加强烈。
斜体标签 --> 双标签
使得文字以斜体的格式显示, 格式是<i></i>和<em></em>。
删除标签 --> 双标签
使得文字以加删除线的方式显示(XHTML推荐使用del)
<del>十块八块</del> ==> 十块八块, 格式是<s></s>和<del></del>。
下划线标签 -- > 双标签
使得文字以加上下划线的方式显示, (XHTML不推荐使用<u></u>), 形式是<u></u>和<ins></ins>。
<ins></ins> ==>等待爱情
1.3 标签属性
格式是 <标签名 属性1 = “值1” 属性2 = “值2”......>内容</标签名>。
eg: <手机 颜色=“红色” 大小=“5寸”></手机>
1.4 图像标签img -->单标签
image图像, 语法是<img src="URL"/>, 作用是在这里面添加图片。
属性 | 属性值 | 描述 |
src(必有) | URL | 图像的路径 |
alt | 文本 | 图像不能显示时的替换的文本 |
title | 文本 | 鼠标悬停时显示的内容 |
width | 像素(XHTML不支持%页面的页面百分比) | 设置图像的宽度 |
height | 像素(XHTML不支持%页面的页面百分比) | 设置图像的高度 |
brder | 数字 | 设置图像边框的宽度 |
注意:
(1)标签可以拥有多个属性, 必须写在开始标签中, 位于标签名的后面。
(2)属性之间不分先后顺序, 标签名和属性, 属性和属性之间均用空格分开。
(3)采取键值对的方式, key=value的格式。
eg:
正常的<br / >
<img src="cz,jpg" width = "300px" height = "300px" /><br/>
带有边框的<br / >
<img src="cz.jpg" width = "300px" height = "300px" border = "3"/><br/>
有提示文本的<br / >
<img src="cz.jpg" width = "300px" height = "300px" border = "3" title = "123"/><br/>
有替换文本的<br / >
<img src="cz,jpg" width = "300px" height = "300px" border= "3" alt = "123"/> <br/>
1.5 链接标签 -->双标签
格式: <a href = "跳转目标" target="目标窗口的弹出方式">文本或者图像</ a>
href, 用于指定链接目标的url的地址, 是一个必须的属性, 当为标签应用href属性时, 他就具有了超链接的功能。
target, 用于指定链接页面的打开方式, 其取值由self和_blank两种方式, 其中self为默认的值, _blank为在新的窗口之中打开方式。
注意是_blank而不是blank!!!
注意:
(1)外部链接, 需要添加https://, 例如https://www/baidu.com
(2)内部链接, 直接链接内部的页面名称即可, eg: <a href="index.html"></ a>。
(3)如果当时没有去顶的链接目标时, 通常将href的属性值设置为"#", 即href="#", 表示该链接暂时为一个空的链接。
(4)不仅可以创建文本的超链接, 在网页中的各种网页元素, 比如图像、表格、音频、视频等都可以添加超链接。
1.6 注释标签
便于阅读和理解, 但是又不需要显示在页面中的注释文字。
简单解释, 注释不会显示在浏览器的窗口中, 但是作为HTML文档内容的一部分, 也会被下载到用户的计算机上, 查看源代码的时候可以查看到。
语法格式: <!-- 注释语句 --> 快捷键是Ctrl+/, 或者是Ctrl+Shift+/, 需要注意注释添加在所注释语句的上一行。
目录文件夹
目录文件夹:普通的文件夹, 存放了相关的页面素材,比如html文件, 图片等。
根目录: 打开文件夹的第一层。
相对路径:
以引用文件的网页所在的位置为参考基础, 而建立出的目录文件。因此, 当保存于不同目录的网页引用同一个文件时, 所使用的路径将不相同。
(1)同一级路径: 直接写就可以
(2)下一级路径:即图像名称位于HTML文件同级文件夹下, "/"
(3)上一级路径:在文件名之前加入"../", 如果是上两级, 则需要使用"../../",以此类推,eg: <img src="../baidu.gif" />。
相对路径是从代码所在的文件出发, 去寻找我们的目标文件的,而我们所说的在哪一级, 为图片相对于HTML页面的位置。
绝对路径 --> 不提倡使用
绝对路径是以Web站点根目录为参考基础的目录路径, 之所以称之为绝对, 意为当所有的网页引用同一个文件时, 所使用的路径是一样的。
“D:\web\img\logo.gif”, or 完整网络 "https://www.itcast.cn/images/logo.gif"
其他文本标签注意事项
3.1 锚点定位
通过创建锚点链接, 用户能够快速的定位到目标的内容。
步骤:1.使用相应的id名标注跳转的目标的位置。 eg:<h3 id="two"> 第二集</ h3>(找目标)
2.<a href = "#id名" >链接文本</ a>创建文本链接(被点击)
3.2 base标签 --> 单标签
总结:
1.base标签可以设置整体的链接打开的状态。
2.base写到<head>< / head>之间。
3.把所有的链接都默认添加target = "_blank"。
预格式化文本pre标签
可以定义预格式化文本。被包围在<pre>标签元素中的文本通常会保留空格和换行符, 而文本也会出现等宽的字体。
被<pre></ pre>包围的保留原格式, 按照哦我们原来预先写好的文字格式来显示页面, 保留空格和换行。
3.4 特殊字符
特殊字符 | 描述 | 字符的代码 |
---|---|---|
< | 小于号 | &+lt+; |
> | 大于号 | & + gt + ; |
& | 和号 | & + amp + ; |
¥ | 人民币 | & + yen +; |
© | 版权 | & + copy + ; |
® | 注册商标 | & + reg + ; |
° | 摄氏度 | & + deg + ; |
± | 正负号 | & + plusmn + ; |
× | 乘号 | & + times + ; |
÷ | 除号 | & + divide + ; |
² | 平方2 | & + sup2 + ; |
³ | 立方3 | & + sup3 + ; |
空格符 | & + nbsp + ; |
4.1 创建表格
表格不是用来布局, 而是常见显示和展示表格格式数据。
基本语法:
<table>
<tr>
<td>单元格文字</ td>
...
</ tr>
...
< /table>
注意事项:
1.table用于定义一个表格标签。
2.tr标签用于定义一个表格中的行, 必须嵌套在table标签之中, row。
3.td标签定义表格中的单元格,必须嵌套在tr标签中, data。
4.字母td代表的是表格数据, 即table data, 数据单元格中的内容。
4.2 表格属性
属性名 | 属性名 | 常用的属性值 |
---|---|---|
border | 设置单元格的边框, 默认border=“0”无边框 | 像素值 |
cellspacing | 设置单元格和单元格之间的空白间距 | 像素值, 默认为2像素 |
cellpadding | 设置单元格内容和单元格边框之间的空白间距 | 像素值, 默认是1像素 |
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
align | 设置表格在网页中水平对齐的方式 | left, center, right |
4.3 表头单元格标签th
作用:一般表头单元格位于表格的第一行或者是第一列, 并且文本加粗居中。
语法:只需要用表头标签<th></ th>替代相应的单元格标签<td></ td>即可。
4.4 表格标题
定义和用法:
<table>
<caption>我是表格标题< / caption>
< /table>
注意:
1.caption元素定义表格标题, 通常这个标题会被居中并且显示在表格之上。
2.caption标签必须紧随在table标签之后。
3.这个标签只有在表格里面才有意义。
4.5 合并单元格
4.5.1 合并单元格的两种方式
跨行合并:rowspan = “合并单元格的个数”
跨行合并:colspan = “合并单元格的个数”
4.5.2 合并单元格的顺序
合并的顺序我们按照先上后下, 先左后右的顺序。
4.5.3 合并单元格的三步曲
1.先确定是跨行合并还是跨列合并。
2.根据先上后下, 先左后右的原则找到目标单元格, 然后写上合并方式还有要合并的单元格的数量, eg: <td colspan= "3" >< / td>。
3.删除多余的单元格——被覆盖的单元格要删除。
4.5.4 表格划分结构
对于比较复杂的表格, 表格的结构就相对的复杂, 所以又将表格分割成了三个部分:题头, 正文和脚注, 而这三部分分别用thead,tbody和tfoot来表示, 这样更好的分清表格的结构。
注意:
1.<thead>< / thead>用于定义表格的头部, 用来放标题之类的东西, <thead></thead>标签之间必须存放<tr>标签。
2.<tbody></tbody>标签用于定义表格的主体, 放数据的本体。
3.<tfoot></tfoot>放表格的脚注之类。
4.以上的标签军放置在table标签中。
5. 列表标签
表格是用来显示数据的, 列表是用来布局的。
概念:容器里面装载着结构, 样式一致的文字或者图标的一种形式。特点是整齐, 整洁,有序, 可结合自由度更高。
5.1 无序列表ul
无序列表的各个列表项之间没有顺序级别之分, 是并列的, 基本语法格式:
<ul>
<li>列表项1</ li>
<li>列表项2</ li>
<li>列表项3</ li>
...
</ul>
注意事项:
1.<ul>< /ul>中只能嵌套<li></ li>标签, 直接在其中输入其他标签或者文字的做法是不被允许的。
2.<li></ li>之间相当于是一个容器, 可以容纳所有的元素。
3.无序列表会带有自己的样式属性, 但是属性是交给css来做。
5.2 有序列表ol
有序列表即为有排列顺序的列表, 其各个列表按照一定的顺序排列定义, 有序列表的基本语法格式如下:
<ol> <li>列表项1</ li>
<li>列表项2</ li>
<li>列表项3</ li>
...
</ ol>
按照一定的顺序, 前面有排列的标号, 不可以随意的更改。
5.3 自定义列表
对术语或者是名词进行解释或者是描述, 列表项没有任何的项目符号
<dl> <dt>名词</ dt>
<dd>解释1</ dd>
<dd>解释2</ dd>
....
<dt>名词</ dt>
<dd>解释1</ dd>
<dd>解释2</ dd>
....
<dt>名词</ dt>
<dd>解释1</ dd>
<dd>解释2</ dd>
....
</ dl>
6.1 input控件
作用:用来收集用户的信息。
HTML中, 一个完整的表单通常是由表单控件(也成为表单元素)和提示信息加上表单域三部分组成。
<input type="属性值" value= "文字" />,此标签是一个单标签。
type属性设置不同的值来制定不同的控件的类型, 除了type属性外还有别的属性。
属性 | 属性值 | 描述 |
type | text | 单行文本输入框 |
password | 密码输入框(不可见) | |
radio | 单选按钮 | |
checkbox | 复选框 | |
button | 普通按钮 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图像形式的提交按钮 | |
file | 文件域, 上传文件所用 | |
name | 由用户定义 | 空间名称,类似于我们的id |
value | 由用户定义 | input控件中的默认的文本 |
size | 正整数 | input控件在页面中的显示宽度 |
checked | checked, 形式是checked="checked" | 定义选择控件中默认被选中的项 |
maxlength | 正整数 | 空间允许输入的最多字符数 |
1.type属性,决定是那种表单
eg1:用户名:<input type="text"/>
eg2:密码:<input type="password"/>
2.value属性
<input type="text" name="username" value="请输入用户名" />
是value默认的文本值, 有些表单想刚刚打开就默认显示几个文字, 就可以通过value来设置。
3.name属性
<input type="text" name="username"/>
后台通过name属性找到表单, 主要的作用是区别不同的表单。name后的值是自定义的。
radio如果是一组的话就可以设置相同的name值来实现单选的效果。
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
checked属性
表示默认选中的状态, 较常见于单选按钮和复选按钮
6.2 label标签
label标签为input元素定义标注(标签), 用于绑定一个表单元素, 被绑定的表单元素会获得输入焦点, 就是当你点击input前的几个字的时候, 光标会自动到后面的输入框之内。
方式:
1.用label标签直接包括, eg:<label>用户名:<input />< /label>, 适合单个的表单选择
2.for属性规定label与哪个表单元素绑定。
<label for ="sex">男< /label>
<input type="radio" name="sex" id="sex" />, 类比锚点。
6.3 textarea控件(文件域)
通过textarea控件可以轻松的创建多行文本输入框
<textarea cols="每行中的字符数" rows="显示的行数">文本的内容</textarea>
但是实际考法之中不会使用, 会通过别的来实现。
input标签是一个单标签, 文本框text只能显示一行文本, 单标签, 通过value显示默认的文本值, 适用于用户名, 昵称和密码等。
textarea是文本域, 可以显示多行文字, 双标签, 默认值写道标签的中间,适用于留言板。
6.4 select下拉列表
多个选项让用户进行选择, 使用select控件定义下拉列表。
<select>
<option></option>
<option></option>
... </ select>
注意至少要包含一对option, option中定义selected="selected"时, 当前项即为默认选中的项。
7. form表单域
HTML中,form表单被用于定义表单域, 以实现用户信息的收集和传递。form中的所有的内容都会被提交给服务器。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</ form>
团队约定:元素属性值可以使用双引号语法, 元素属性值可以写上的就都写上, 不要使用默认的值,因为不同的浏览器可能说默认不一样。
action是用于接收并且处理表单数据的服务器程序的url地址
method, 有两种方式,get和post,设置表单数据的提交方式
name, 指定表单名称, 区分同一页面中的多个表单。
查文档的网站
W3C: https://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/