【Web前端开发】HTML基础

Web前端开发 是用来直接给用户呈现一个一个的网页，主要包含实现用户的结构（HTML）、样式（CSS）、交互（JavaScript）。然而一个软件通常是由后端和前端完成的。可以查阅文档：HTML 教程 (w3school.com.cn)

1.HTML

1.1HTML概念

HTML称为超文本标记语言。

• 超文本指：文本、声音，图片、视频、表格、链接等；
• 标记指：由标签构成的语言。

1.2HTML结构

HTML基本结构如下：

• html标签是整个html文件中的根标签
• head标签是编写页面相关的属性
• title标签是页面的标题
• body标签是页面显示的内容

1.3HTML基本标签

• 标题标签<h1>~<h6>：借助标题标签，能够清晰地划分出页面内容的层次关系。

• 段落标签<p>：是将每个段落区分开来
• 换行标签<br>：两个换行标签相当于一个段落标签

• 加粗标签strong / b：让字体变粗

• 倾斜标签em / i：让字体变倾斜
• 下划线标签ins / u：字体下边有一条线
• 删除线标签del / s：字体被删除但是还是可以显现出来

---

• 超链接标签a：

1. href属性：点击跳转某个页面链接中，#代表占位符（也表示在当前页面刷新）
2. target属性：默认在当前页面跳转_self，如果想要在新的页面打开就用_blank

---

• 图片标签img：

1. src属性：指定图片路径，img标签必须搭配src使用
2. alt属性：alt后面的信息表明图片加载失败后的提示信息
3. title属性：当光标落在图片上时出现的提示信息
4. width / height属性：修改图片大小
5. border属性：给图片添加边框

---

• 表格标签table：

1. width / height属性：将表格中每一个小表格改成对应的width和height
2. border属性：给表格添加边框
3. cellspacing属性：表格中的边框默认为1px，该属性是将边框间隙进行调整
4. align属性：将表格调至左、中、右任一位置（默认left，center，right）

• 表格头标签thead：
• 表格体标签tbody：
• 表格中的行标签tr：
• 表格中的列标签td：

1. rowspan属性：合并行，从当前位置往下数几行合并
2. colspan属性：合并列，从当前位置往下数几列合并

---

列表标签

• 有序列表标签ol：ol -》li

1. type属性：1（默认数字编号），a（小写英文编号），A（大写英文编号），i（小写罗马编号），I（大写罗马编号）
2. start属性：从某个位置编号开始

• 无序列表标签ul：ul -》li

1. type属性：disc（默认实心圆），square（实心方块），circle（空心圆）

---

表单标签

• 表单域标签form：

1. action属性：跳转至该链接

• 表单控件标签input：

1. type属性：其中的submit和reset标签必须在form标签内效果才能实现

• 相关联标签label：

1. for属性：for搭配着input中的id属性使用，如果要让两者相关必须要id和for相同值。例：如果我想要选择男的时候点击男也可以选中，那就需要给男这个字与input-radio加上相关联

• 下拉菜单标签select：select -》option（设置默认值时用selected属性）
• 文本域标签textarea：

1. cols属性：设置列的默认值
2. rows属性：设置行的默认值

div标签：独占一行

spanbiaoqian：不独占一行

特殊符号

1. &nbsp：空格。想要多少个空格就需要写多少遍
2. &lt：小于号
3. &gt：大于号
4. &amp：按位与