目录
0 HTML语法规范❤️
0.1 基本语法概述⭐
都由肩括号括起来,一般成对出现。
0.2标签关系⭐
1 HTML基本结构标签❤️
2 开发工具❤️
常用插件
用来定义当前文档显示的语言
en 定义语言为英语
zh-CN 定义语言为中文
但是英文中可以写中文,中文中也可以写英文
比如你定义法国语言但是网页中有中文,他会提示翻译
charset 常用的值有::GB2312 、BIG5 、GBK 和 UTF-8,其中 UTF-8 也被称为万国码,基本包含了全世界所有国家需要用到的字符
3 标签❤️
3.1 标题标签⭐
<body>
<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>
</body>
- 加了标题的文字会变的加粗,字号也会依次变大
- 一个标题独占一行
- 一共六级
3.2 段落标签⭐
<p>段落标签</p>
- paragraph 的缩写
- 文本在一个段落这种会根据浏览器窗口的大小进行自动换行
- 段落和段落之间保有空隙
- 回车不分段
3.3 换行标签⭐
<br />
是个单标签
标签只是简单的开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
3.4 文本格式化标签⭐
强调作用:为文字设置粗体、斜体、下划线等效果
语义 | 标签 |
---|---|
加粗 | <strong></strong> 或<b></b> |
倾斜 | <em></em> 或<i></i> |
删除线 | <del></del> 或<s></s> |
下划线 | <ins></ins> 或<u></u> |
更推荐使用第一组
3.5 布局盒子标签⭐
<div></div>
:一行只能放一个,大盒子
<span></span>
: 一行可以放多个,小盒子
3.6 图像标签⭐
所有属性放在img后面
<img src="pink1.jpg" alt="替换文本" title="提示文本" />
属性 | 属性值 |
---|---|
scr | 图像路径 |
alt | 替换文本(无法显示图像时,显示文本) |
title | 提示文本(鼠标放在图像上,显示文本) |
width | 图像宽度 |
height | 图像高度 |
border | 图像边框 |
- src是标签的必须属性,它用于指定图像文件的路径和文件
- 宽度和高度只修改一个,另外一个等比缩放。都加可能会图像变形
3.7 路径⭐
3.7.1 文件夹和根目录
- 目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文件、图片等。
- 根目录:打开目录文件夹的第一层就是根目录
3.7.2 相对路径
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图形文件位于 HTML 文件同一级 如<img src="1.png"> | |
下一级路径 | / | 图形文件位于 HTML 文件下一级 如 <img src="images/1.png"> |
上一级路径 | …/ | 图形文件位于 HTML 文件上一级 如 <img src="../1.png"> |
3.7.3 绝对路径
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
3.8 超链接标签⭐
<a href="链接目标的url地址" target="目标窗口的弹出方式">文本或图像</a>
a是单词anchor的缩写,意思是锚。
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,必须属性 |
target | 用于指定连接页面的打开方式。_self为默认值,在当前窗口打开,打开后本窗口没了,_blank为在新窗口中打开 |
- 外部链接必须以
http://
开头 - 内部链接,使用地址找
- 空连接 使用
#
代替 - 下载链接,文件压缩包所在的地址
- 网页元素(比如图片)链接:前面添加
<img src="pink1.jpg"/>
3.9 锚点链接⭐
作用:点击链接,可以快速定位到页面中的某个位置
- 在链接文本的href属性中,设置属性值为 #名字
- 找到目标位置标签,里面添加一个 id属性=刚才的名字
<a href = "#two">标题个人生活</a>
<h3 id = "two">个人生活内容</h3>
3.10 注释⭐
- 注释快捷键为 ctrl + /
<!-- 注释语句 -->
3.11 特殊字符⭐
重点记住:空格、大于号、小于号 这三个,其余的使用的很少,如果需要使用回头查阅即可
3.12 表格标签⭐
table
用来定义表格的标签tr
用来定义表格中的行,必须嵌套在标签中
td
用来定义表格中的单元格,必须嵌套在 标签中th
用来定义表格中的表头,表头单元格里面的内容加粗居中显示
<body>
<table>
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
<tr> <td>小可爱</td> <td>女</td> <td>永远18</td> </tr>
</table>
</body>
3.12.1 表格属性
表格标签的属性实际开发并不常用,因为基本都是通过后面的CSS来设置的
3.12.2 表格结构标签
为了更好的表示表格的语义,可以将表格分割成 表格头部 和表格主体两大部分
- 用
<thead></thead>
标签表示表格的头部区域,<thead>
内部必须拥有<tr>
标签,一般是位于第一行 - 用
<tbody></tbody>
标签表示表格的主体区域,主要是用于放数据本体 - 以上标签都是放在
<table></table>
标签中
3.12.3合并单元格
- 跨行合并:
rowspan=“合并单元格的个数”
,写在最上一行 - 跨列合并:
colspan="合并单元格的个数"
,写在最左侧
3.13、列表标签⭐
- 无序列表:
<li></li>
,里面只能包含<li></li>
,没有顺序。<li></li>
里面可以包含任何标签 - 有序列表:
<ol>
,里面只能包含<li></li>
,有顺序 - 自定义列表:
<dl>
,里面只能包含<dt>和<dd>
,<dt>
和<dd>
里面可以放任何标签,<dd>
围绕<dt>
进行说明。
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>小米部落</dd>
<dd>官方微信</dd>
</dl>
显示结果
3.14 表单标签⭐
一个完整的表单通常由表单域,**表单控件(表单元素)**和 提示信息 3部分组成。
3.14.1 表单域
- 表单域是一个包含表单元素的区域,写表单元素之前先写表单域。
- 标签用于定义表单域,会把它范围内的表单元素信息提交给服务器。
属性 | 作用 |
---|---|
action | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | 用于设置表单数据的提交方式,其取值为get或post |
name | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
<form action="url地址" method="提交方式" name="表单域的名称">
</form>
3.14.2 表单控件(表单元素)
①input输入表单元素
input输入表单元素,是个单标签,type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)
type 属性
属性值 | 描述 |
---|---|
text | 单行文本框 ,默认宽度为 20 个字符。 |
password | 密码框,该字段中的字符被掩码 |
radio | 单选框 |
checkbox | 复选框 |
button | 按钮,如获取短信验证码 |
file | 定义输入字段和"浏览"按钮,供文件上传。 |
image | 定义图像形式的提交按钮 |
hidden | 定义隐藏的输入字段 |
reset | 重置,清楚表单中的所有数据。 |
submit | 提交,把表单数据发送到服务器。 |
其常用属性:
属性 | 描述 |
---|---|
name | 定义 input 元素的名称 |
value | 规定 input 元素的值 |
checked | 规定此 input 元素首次加载时应当被选中 |
maxlength | 规定输入字段中字符的最大长度 |
- name 和 value 是每个表单元素都有的属性值,主要给后端人员使用。
- name 是表单元素的名字,要求 单选框和复选框要有相同的name值
- checked 属性主要针对于单选框和复选框,主要作用是一打开页面,就可以默认选中某个表单元素
②文本框与密码框
<body>
<form>
用户名:<input type="text"> <br/>
密码:<input type="password">
</form>
</body>
③单选框和复选框
name 是表单元素的名字,要求 单选框和复选框要有相同的name值
<form>
<!-- radio是单选框,可以多选一 -->
性别:男<input type="radio"> 女 <input type="radio">
<!-- checkbox是多选框,可以多选 -->
爱好:吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打游戏<input type="checkbox">
</form>
④name和value属性
name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单
name的主要作用:区别不同的表单元素
<form>
<!-- name是表单元素的名字,这里的性别单选按钮必须有相同的名字name,才能实现多选一 -->
性别:男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
爱好:吃饭<input type="checkbox" name="habby" value="吃饭"> 睡觉<input type="checkbox" name="habby" value="睡觉"> 打游戏<input type="checkbox" name="habby" value="打游戏">
</form>
注意:单选框和复选框name必须一致,value可以不一样
⑤checked和maxlength
- 单选按钮和复选框可以设置checked 属性
- 当页面打开时候就可以默认选中这个按钮
- 单选框只能给其中一个加checked,复选框可以多加
性别:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
maxlength:规定最多输入多少个字符
⑥submit和reset
type
属性设置为submit:提交按钮会把表单数据发送到服务器type
属性设置为reset:重置按钮会清除表单中的所有数据
⑦button和文件域
- type 属性设置为button:是一个按钮
- type 属性设置为file:是一个文件域,可以上传文件
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域:上传文件使用的 -->
上传头像:<input type="file">
⑧label
- label标签用于绑定一个表单元素,当点击标签内的文本时,浏览器就会自动将焦点(光标)转到表单元素上,用来增加用户体验
- label标签的 for属性 应当与相关元素的id 属性相同
<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />
3.14.3 select下拉表单元素
- 下拉表单元素
- 中至少包含一对
- 在中定义 selected=“selected” 时,当前项即为默认选中项。
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
3.14.4 textarea文本域元素
用于定义多行文本输入的控件,而不是使用文本框
<textarea>
文本内容
</textarea>
cols = “每行中的字符数” , rows = “显示的函数”,实际开发中不会使用,都是用CSS来改变大小,文本内容会直接在网页默认显示。