【Web前端第二阶段--Html】Day02

【Web前端第二阶段–Html】Day02-am

---

前言

面试题:97个HTML标签分为哪两类？各有哪些？
块级标签(block):必须独占一行；
例如：p、h1~h6、pre…
行内标签(inline):可以与其他内容共处一行
例如：b、i…

---

1、pre标签

pre标签: 保留(preserve)源代码中的原始格式，块级元素

pre标签无法实现字体的加粗等效果,还是需要结合其他之前的标签一起来使用

2.h系列标签

被h标签包裹的内容变大加粗,并且独占一行,块级元素

<!-- 答案1:h后数字越大,字体越小,最大到h6,h4的字体大小与普通文本一样,只是加粗了 -->
<!-- 答案2:写了不存在的h8标签并不会报错,没有特殊的显示效果,浏览器会直接忽略 -->
<h1>春晓</h1>
<h2>孟浩然</h2>
<h3>春眠不觉晓</h3>
<h4>处处闻啼鸟</h4>
<h5>夜来风雨声</h5>
<h6>花落知多少</h6> 
我是普通文字
<h8> 哈哈哈 </h8>

3、P标签

p标签，块级元素 独占一行 p元素默认有上下行间距

4、什么是属性？

属性:也称为特征，描述标签的某一方面的特点
写法:<标签名 属性名1 = “属性值1” 属性名2 = “属性值2”> 段落内容 </标签名>

1. 属性的声明必须位于开始标记里
2. 一个元素的属性可能不止一个,多个属性之间用空格隔开
3. 多个属性之前不区分先后顺序
4. 属性名与属性值用等号连接
5. 属性值要包含在引号中

<!-- 注意属性值必须使用单/双引号包裹 -->
<!-- <h2 gender="男" age="18" height="180">李白</h2> -->
<!-- align对齐方式 right/left/center 靠右/靠左/居中 -->
<!-- 按住Ctrl，光标点多个位置可以一起编辑，Esc退出 -->
<h1 align="center">静夜思 李白</h1>
<p align="center">床前明月光</p>
<!-- align属性只是凑巧这两个标签能用,比如pre b标签等就没有这个属性 -->
<!--所有标签都有的4个通用属性,后面会学:id class style title-->

5、hr标签

hr标签:用于在页面上创建一条水平的分割线,它是一个空标记,hr后面的文本会出现在新段落中
常用属性:color颜色 width占据页面宽度 size线条粗细 align位置信息

6、div标签

div标签: division区/块,是一个最简单的块级元素,只有独占一行的效果,没有其他效果

7、 图像

URL(Uniform Resource Locator):统一资源定位器,用来标识网络中的任何资源,其实就是文件对应的路径.我们常说的有绝对路径和相对路径.

8、超链接

a标签:全称anchor锚,超链接
在页面上定义一个位置。叫做锚点
使用a标签，跳转到锚点，页面直接在这个位置显示

 - 定义锚点:使用元素的id名称直接当做锚点名称
 - 跳转锚点:<a href="#锚点名称"></a>

html详解

• lang属性:用来指定当前页面所用的自然语言(language)
• title标签:添加页面标签名
• link标签:添加页面标签图标

表格table

table标签的属性

• border=“2px” 表格边框的宽度

• bordercolor=“red” 表格边框的颜色

• width=“400px” 表格的宽度

• height=“400px” 表格的高度

• align=“center” 表格的水平对齐方式

• bgcolor=“yellow” 表格的背景颜色

• cellpadding=“10px” 表格的内边距（指边框与内容间的距离）

• cellspacing=“0px” 表格的外边距（指边框与边框间的距离）
  tr标签的属性
  表示表格中的一行table row,简称tr

• align=“right” 这一行内容的水平对齐方式 right靠右/left靠左/center居中

• valign=“bottom” 这一行内容的垂直对齐方式 top靠上/middle居中/bottom靠下

• bgcolor=“lightblue” 这一行的背景颜色

td标签的属性：
写在tr标签里，表示这一行的这一个单元格，是真正写数据的地方

• width=“200px” 这一个单元格的宽度
• height=“200px” 这一个单元格的高度
• bgcolor=“lightgreen” 这一个单元格的背景颜色
• align=“left” 这一个单元格中内容的水平对齐方式right靠右/left靠左/center居中
• valign=“top” 这一个单元格中内容的垂直对齐方式top靠上/middle居中/bottom靠下

注意：如果修改了某个单元格的高度，那么这行的所有单元格都会随之改变高度
如果修改了某个单元格的宽度，那么这列的所有单元格都会随之改变宽度

行和列的标题th
行和列的标题使用的是th标签，效果：加粗与居中
用th替代td,所以th可以使用td的所有属性

结构标记

• h5出了一些带有结构语义的标签来替代div,增强代码的可读性
• header 定义网页的头部，或者是某个区域的顶部
• footer 定义网页的底部，或者是某个区域的底部
• nav 定义网页的导航链接
• section 定义网页的主体
• aside 定义网页的侧边栏
• article 定义与文字相关的内容，比如论坛，回帖

表单

3.语法：form标签的属性：

• action=“定义当前表单提交时发送的动作，表示表单中的数据将要提交给那个接口来处理
  如果action什么值也不写，默认提交到当前页面”
• method=“定义表单中的数据提交给服务器的方式”
  1）get提交：默认值，一般向服务器要数据时使用
  特点：明文提交，提交的内容会在地址栏显示，提交数据大小有限
  2）post提交：把数据传递给服务器的时候用
• enctype:指定表单数据的编码方式，允许提交什么样的数据给服务器 application/x-www-form-urlencoded
  默认值，允许将任意字符提交给服务器（文件除外） text/plain 允许提交普通字符，普通字符不包含@ = & 等符号
  multipart/form-data 允许传文件

表单控件

1.input可以在页面上提供各种各样的输入控件,input的属性：
type:定义当前input的类型
name:为控件定义名称，提供给服务器端使用
value：为控件定义的默认值

2.文本框 type=“text”
placeholder：给控件添加一些提示信息
maxlength=“3” ：允许输入的最大长度
readonly：只读，只能看，不能改
3.密码框 type=“password”
密码框中的文字不以明文的方式展现

4.提交按钮 type=“submit”：提交，将表单中的数据收集整理并发送给服务器
5.重置按钮 type=“reset” ：重置，将表单中的数据恢复到初始化状态，注意不是清空
其它按钮 type=“button” 没有功能，配合事件，调用js脚本
注意：按钮的value属性指的是按钮上显示的文字，并不是提交的值
h5新出的标签button,作用等同于submit,可以提交数据，可以使用事件

单选与多选

单选 type=“radio”
多选type=“checkbox”
注意：必须有name属性，不然没有分组，不是单选的效果
必须有value属性 ，不然提交是on
可以通过checked设置是默认选中的

隐藏域type=“hidden”
作用：想把数据提交给服务器，但不想把数据提交给用户看

文件type=“file”
如果要传文件的话，form的enctype=“multipart/form-data”表示允许传文件，如果设置了multipe属性，可以一次传多个文件

多行文本域textare
可以把多行文本域看作是一个大的文本框，允许多行输入
文本
注意：设置的文本域大小根据硬件不同，会出现不准确的现象

select+option 下拉选择框
如果option没有设置value的话，会把标签中的内容当作value值提交
如果option设置了value值，会提交这个value的值
size大小，显示出来的选项个数，默认是1个，1个的时候是下拉选择框，>1是会变
成滚动条
multipe 表示可以选中多个值
如果option没有设置value的话，会把标签中的内容当作value的值提交
如果option设置了value值，会提交这个value的值
option 中可以添加 selected 表示这一项默认选中

lable标签
主要可以实现文本和表单控件的关联
实现关联效果：input的id值和label的for值一样