【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”> 段落内容 </标签名>
- 属性的声明必须位于开始标记里
- 一个元素的属性可能不止一个,多个属性之间用空格隔开
- 多个属性之前不区分先后顺序
- 属性名与属性值用等号连接
- 属性值要包含在引号中
<!-- 注意属性值必须使用单/双引号包裹 -->
<!-- <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值一样