1.html初识
html指的是超文本标记语言,是一种标记语言。主要需要学习html标签。
1.1html骨架标签
标签名 | 定义 | 说明 |
---|---|---|
html标签 | 根标签 | |
文档的头部 | 在head标签中中必须设置title | |
文档的标题 | 网页的标题 | |
文档的主体 | 包含所有页面内容 |
html标签名,类型,标签属性和大部分属性值建议统一用小写。
1.2html元素标签分类
分类:
常规元素(双标签)
<标签名>内容</标签名>
前面开始标签,后面结束标签,/为关闭符
空元素(单标签)
<标签名 />
里面不需要包含内容,只有一个开始标签不需要关闭。
1.3html标签关系
针对于双标签有两种:嵌套关系和并列关系
嵌套关系(父子关系):
<head>
<title></title>
</head>
并列关系(兄弟关系):
<body></body>
<head></head>
建议:父子关系的标签,子元素最好缩进一个tab的键位。如果是并列关系,最好上下对齐。
2.代码开发工具
dreamweaver,sublimetText,WebStorm,Hbuilder
vscode中新建一个html文件,然后输入一个!,选择第一个选项,即可快速生成html文件的骨架。
3.文档类型
用法:
<!DOCTYPE html>
作用:
声明位于文档中的最前面的位置,处于标签之前。表明当前浏览器按照HTML5规范解析页面。
4.页面语言lang
<html lang="en">
常用:en定义为英语,zh-CN为中文。
5.字符集
<meta charset="UTF-8">
常用:UTF-8,gbk,gb2312(简单中文),BIG5(繁体中文)
6.HTML标签的语义化
标签语义化指的是标签的含义。
语义化的目的:
根据标签的语义,在合适的地方给出一个最为合理的标签,让结构更加清晰。
语义化的好处:
1.方便代码的阅读和维护
2.让浏览器或者网络爬虫可以很好的解析,分析内容
3.使用语义化标签会具有更好的搜索引擎优化
语义是否良好:
当我们去掉css之后,网页结构是否依然组织有序,并且具有良好的可读性。
遵循的原则:
先确定语义的HTML,再选合适的CSS。
7.html常用标签
7.1排版标签
主要和css搭配使用,显示网页结构的标签。
(1)标题标签h
一共6个等级,从
到
。
-
加了标题的文字会加粗,h1的字号最大,然后依次递减。
-
一行只能放一个标题
(2)段落标签p
作用:可以把html分割为若干个段落。
文本在一个段落中会根据浏览器的窗口的大小自动换行。
(3)水平线标签hr
创建横跨网页的水平线,将段落与段落之间隔开,使文档结构清晰。**
是单标签。**在网页中使用默认样式的水平线。
<hr />
(4)换行标签br
在网页中,一个段落文字会依次从左到右,直到浏览器的最右端,如果需要强制换行显示,那么就需要用到换行符号。
<br />
(5)div和span标签
div和span是网页布局主要的2个盒子,div和span标签是没有语义的。
<div></div>
<span></span>
他们两个都是盒子,用来装网页的,区别为:
div标签是用来布局的,一行只能放一个div。
span标签是用来布局的,一行可以放多个span。
7.2文本格式化标签
标签 | 显示效果 |
---|---|
加粗 | |
斜体 | |
加删除线 | |
加下划线 |
7.3标签属性
<标签名 属性1="属性值1" 属性2="属性值2" > 内容 </标签名>
7.4图像标签img
<img src="图像url" />
属性:
属性 | 属性值 | 描述 |
---|---|---|
src | url | 图像的路径(必须) |
alt | 文本 | 图像不能显示时的替换文本 |
title | 文本 | 图像悬停时展示的内容 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 数字 | 设置图像边框的宽度 |
注意:
1.属性必须跟在开始标签中,位于标签名之后
2.属性之间不分先后顺序,标签名与属性,属性与属性之间以空格分开
3.采用键值对形式,key=“value"的格式
7.5 链接标签
<a herf="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
属性 | 作用 |
---|---|
href | 指定链接目标的url地址,(必须属性),当有href属性时,就具备了超链接的功能。 |
target | 指定链接页面的打开方式。有self和blank,_self为默认值,_blank为在新窗口中打开。 |
注意:
1.外部链接需要添加http://
2.内部链接:直接链接内部网页名称即可
3.如果当时没确定,通常暂定义为空链接
<a href="#"></a>
4.不仅可以创建文本超链接,还可以创建各种网页元素(图像,表格,音频,视频)等超链接。
图像替代链接
<a href="http://wwww.baidu.com"> <img src="p1.jpg" /> </a>
当做某个文字即可,点开图像可以跳转至百度首页
7.6注释标签
语法格式:
<!-- 注释语句 -->
快捷键是Ctrl + / 或者Ctrl + shift + /
注释标签内容不会在网页中展示。
8.路径
相对路径:同一级直接文件名引用;下一级用/表示;上一级用…/表示(上一级,下一级,同一级是图片位于HTML页面的位置)
绝对路径:以web站点根目录为参考基础的目录路径,为完整的文件路径或者完整的网络地址。(用的较少)写法为符号\
9.锚点定位
通过创建锚点链接,用户能够快速定位到目标内容。
创建步骤:
1.使用相应的id名称跳转至目标的位置(找目标)
2.使用
<a href="#id名">链接文本</a>
以上代表被点击的(拉关系)
10.base标签
语法:
<base target="_blank"> --写在head标签里面,表明所有链接都在新窗口中打开--
11.预格式化文本pre标签
预格式化文本
标签可定义预格式化文本,被标签包围的文本通常会保留空格和换行符,文本呈现等宽字体。(怎么写怎么显示)
12.特殊字符
html为特殊字符准备了专门的替代代码:
特殊字符 描述 字符的代码 空格符  ; < 小于号 <; > 大于号 >;
他们不是标签,而是符号。
13.表格,表单,列表
表格用来展示数据;表单用来收集用户信息;列表用来布局,列表可以页面布局整齐规范。
13.1表格
1.创建表格
<table>
<tr>
<td> 单元格内的文字</td>
...
</tr>
...
</table>
创建表格的基本标签:table,tr,td缺一不可。
- table用来定义一个表格标签
- tr标签用来定义表格中的行,必须嵌套在table标签内。(行标签)
- td(table data)用于定义单元格,必须嵌套在tr标签内。td指的是表格数据,即单元格的内容。(单元格标签)
2.表格属性
属性名 | 含义 | 常用属性值 |
---|---|---|
border | 边框(border=“0”无边框) | 像素值 |
cellspacing | 单元格和单元格边框之间的空白间距 | 像素值(默认2) |
cellpadding | 单元格内容与单元格边框之间的空白间距 | 像素值(默认1) |
width | 表格宽度 | 像素值 |
height | 高度 | 像素值 |
align | 表格在网页中的水平对齐方式 | left,center,right |
3.表头单元格标签th
作用:表头单元格位于第一行或者第一列,并且文本加粗居中
语法:替换相对应的单元格标签即可
4.表格标题caption
<table>
<caption> 我是表格标题 </caption>
</table>
注意:
- caption元素定义表格标题,并且标题会被居中并且显示在表格上。
- caption标签必须紧随table标签之后,并且这个标签只在表格里面才有意义。
5.合并单元格
1.两种方式
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
2.合并单元格的顺序
先上后下,先左后右
3.三个步骤
- 先确定跨行还是跨列
- 根据先上后下,先左后右的原则找到目标单元格,然后写上要合并的数量
- 删除多余的单元格
6.复杂表格划分结构:
题头,正文和脚注。分别用:thead,tbody,tfoot来标注
注意:
- 定义表格头部,存放标题。内部必须有标签
- 定义表格的主体,放数据本体。
- 放表格的脚注。
以上标签都是放在table标签之内的。
13.2列表和表单
列表用来布局,可以装载文字,图表或者图片,自由组合度更高。
1.列表标签
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
无序列表会自带样式属性。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<dl>
<dt> 名词1 </dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
2.表单标签
表单主要是为了收集用户信息,跟用户进行交互,收集用户资料。主要包含三大部分:表单元素,提示信息和表单域3部分组成。
常用属性:
属性 | 属性值 | 描述 |
---|---|---|
type | text | 单行文本输入框 |
type | password | 密码输入框 |
type | radio | 单选按钮 |
type | checkbox | 复选框 |
type | button | 普通按钮 |
type | submit | 提交按钮 |
type | reset | 重置按钮 |
type | image | 图像形式的提交按钮 |
type | file | 文件域 |
name | 由用户自定义 | 控件的名称 |
value | 由用户自定义 | input控件中的默认文本值 |
size | 正整数 | input控件在页面中的显示宽度 |
checked | checked | 表示默认为选中状态(单选按钮和复选按钮) |
maxlength | 正整数 | 控件允许输入的最多字符数 |
-
label标签
概念:label标签为input元素定义标注
作用:绑定一个表单元素,当点击label标签时,被绑定的表单元素就会获得输入焦点。
用法:
**第一种:**label直接包括input表单。适合单个表单选择
<label> 用户名:<input type="radio" name="username" value="请输入用户名"> </label>
**第二种:**for属性规定label与哪个表单元素绑定(for+id)
<label for="sex">男</label> <input type="radio" name="sex" id="sex">
-
textarea控件(文本域)
<textarea cols="每行中的字符数" rows="显示的行数">文本内容</textarea>
通过textarea控件可以轻松的创建多行文本输入框
-
select下拉菜单
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
注意:
1.中至少应该包含一对
2.在option中定义selected="selected"时,当前选项即为默认选中项
3.表单域
form标签用于定义表单域,以实现用户信息的收集和传递,form中所有内容都会被提交给服务器。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 指定接受并处理表单数据的服务器程序的url地址 |
method | get/post | 设置表单数据的提交方式 |
name | 名称 | 指定表单的名称,以区别一个页面中的多个表单 |