8.
html标记语言是由很多的标签组成,不同的标签有不同的样式和功能。
h1
h1-h6标题标签,字体依次由大到小,字体有加粗的效果。
align属性:设置文本对齐方式,属性值有left,center,right。默认左对齐,可以不写。
:p标签,段落标签,p标签上下自带16px外边距:显示一根横线
没有任何默认样式,主要是给css样式使用
:换行标签,br后面的内容换行显示,没有边距。
b标签包裹的文本会加粗显示,没有任何的语义。html4的版本标签
有强调的语义,包裹的文本会加粗显示。html5版本新加的标签
没有任何语义,单纯的斜体。html4的标签
有强调的语义,包裹的文本显示为斜体。h5增加。
2:上标,包裹文本显示偏上显示
2下标,包裹文本偏小显示
表示引用的一段话(如名人名言),有默认的外边距引用的内容出自某处或某人
表示引用,内容用""包裹
表示内容是一段代码,显示为等宽字体样式
标记一段内容,背景显示为黄色
可以保留换行和空格符号,但是不好控制网页显示效果,一般没有特殊需求不用。半角符号,一个英文字母的宽度,半个中文字符的宽度
全角符号,2个字母的宽度,1个中文字符的宽度
比标题内容小一号字体,默认效果在h标签里生效。h5新加
190.00表示删除的内容,文本会有一个横线
7.9折表示插入的内容,文本会有下划线
注释内容是浏览器不会渲染处界面,主要是给编程人员看的。vscode里面的注释快捷键是ctrl+/
安装汉化包
常用插件
HTMLSnippets对html代码进行提示
AutoRenameTag自动闭合标签,同步修改标签
HTMLCSSSupport智能提示css类名和id名称
openinbrowser当前的html文件可以用浏览器打开
LiveServer创建一个本地服务器打开文件
shift+!选择第一个,可以快速生成网页的基本结构
默认有人样式和语义,表示一个块级区域,是主要的网页布局区域。表示网页的主题内容,一个网页只有一个main
主要表示一个独立主题,可以取代div元素。
导航元素,表示导航模块,一般网页只有一个nav
html标签嵌套规则:1.布局元素可以嵌套任意元素2.块级元素可以嵌套行内元素3.行内元素不能嵌套块级元素4.p标签不能嵌套其他的块级元素
a超链接标签:
属性
例如
2
target是跳转网页打开的方式,属性值默认是_self当前窗口打开,-blank是新开一个窗口打开。
ping:点击a标签,可以像ping指定的地址发送一个post请求,主要用于跟踪用户的行为。
图片标签:
3
4
5
6
7
信息包裹起来。
figcaption对图片的描述,可以做图片的标题。
列表
ol有序列表
...
有序列表,每一列前面都有一个数字。
属性值设置列前面的数字类型:
1阿拉伯数字(默认值)。
a小写字母排序
A大写字母排序
i小写罗马数字排序
I大写罗马数字排序
ul无序列表
无序列表,没有序号,每一列前面有一个符号
type属性设置列表每一列的符号:disc实心圆(默认值),cirlce空心圆,square矩形。可以做网页的布局元素。
dl自定义列表
- web前端
- 网页前台
dl列表,dl里面可以有多组dt,dd的组合。
dt表示一个术语dd是对术语的解释
iframe网页容器
embed/XNTg2MzEyMjY2NA=="
frameborder="0"allowfullscreen>
iframe网页容器,可以在一个区域显示其他网页以及网页内容src属性设置显示网页的地址width设置iframe的宽度,height设置iframe的高度frameborder设置边框的尺allowfullscreen点击全屏按钮,可以全屏显示多媒体标签
video:可以播放视频
8
9
10
src是视频地址,可以是本地地址或者网络地址controls播放器的控制条autoplay自动播放(chrome浏览器需要设置muted)muted静音loop循环播放width设置宽度,height设置高度,一般设置一个,让另外一个尺寸自动计算poster视频封面图片,可以是网络图片,也可以是本地图片preload视频缓存属性值:auto(默认值)缓冲整个视频,none不缓冲,metadata缓冲视频文文件的元数据,一般不设置,保持默认。
video/webm"> video/mp4"> 为了兼容不同浏览器播放视频文件的格式,用source元素直到找到能播放的视频文件为止 html符号输入: 可以用搜狗输入法输入特殊符号 通过html符号源代码显示符号(推荐方法) table表格 table表示一个表格 属性: tr表示一行 th表头单元格-默认字体加粗,水平居中 td标准单元格,主要显示数据(显示内容放在td元素里面) caption表格的标题 thead表格的头部(没有头部,可以不写,如果写了thead必须要有tbody和tfoot),表格头部的单元格一般用th表头元素 tbody表格的身体部分 tfoot表格的底部 url:统一资源定位符,也叫网址 **form表单:**标签包含很多表单控件,表单控件可以允许用户输入输入数据并通过form标签传递这些数据到后端。(表单控件都有一个name属性,通过name属性可以把表单控件输入的数据通过查询参数传递到后端。) 值:get请求(默认)数据以查询参数的方式传递。优点:数据传输比较快,缺点:直接能在网址看见数据,传输数据大小有限制,只能传递字符串。如果是get请求可以不写method属性 post请求,数据通过请求体传递,在网址后面看不见数据。缺点:数据传输没get快,缺点:数据在请求体相对安全,传输数据几乎没有显示,可以传递各种数据。 enctype指定post请求,浏览器传递数据的MIME类型(后端根据不同的mime类型取值方式不一样) input输入框标签,自闭合标签 type属性值: fieldset标签 fieldset标签是一个块级容器,表示表单件的集合legend设置fieldset控件的标题,通常在fieldset的第一个元素,会嵌入到fieldset上角。 语法: lable标签 lable表单控件的文字说明,一般用预form表单里面 可以把表单控件放入label标签里面,自动关 联。 button按钮 属性: type按钮的类型:submit(提交form表单数据),reset重置(重置表单数据为初始状态),button普通按钮,没有任何行为。——》button标签可以用在form标签外面。会具有submit属性,可以提交 select下拉菜单 生成一个下拉菜单,需要配合option标签设置选项 1.select——》name表单名称,数据以name=value方式传到后端(value是选中option的vlaue值) disabled表单不能选择 required必填 multiple可以选中多个选项(需要按ctrl多选)size设置了multiple,可以设置一次可见的行数。 2.option设置下拉菜单的一个选项。——》value选择的值selected设置默认选中项 3. datalist容器 textarea多行文本输入框 output 10+10 用户的操作结果。 progress meter指示器 max="500"value="455"low="150"high="350"> meter指示器,显示已知范围内的一个值,value在low和high显示绿色,其他区域显示橘色。 details折叠标签 details折叠标签,浏览器默认会折叠标签包裹内容,点击才能展开查看内容