5大浏览器:IE,谷歌,火狐,苹果,欧朋
Web标准:保证不同浏览器打开网页一样
语言:结构:页面元素和内容:HTML。表现:网页元素的外观和页面样式等(如:颜色,大小):CSS.行为:网页模型的定义与页面交互:JavaScript
HTML:超文本标记语言
HTML骨架结构:
html标签:网页的整体。
head标签:网页的头部。
body标签:网页的身体。
title标签:网页的标题。
Alt+B:网页打开浏览器
Ctrl+/:注释
标签:
1.标签由<,>,/,英文单词和字母组成。其中被<>括起来的英文单词或字母被称为标签名。
2.常见标签由2部分组成,称为双标签。前部分叫开始标签,后部分叫结束标签,2部分之间包裹内容。
3.少数标签由一部分组成,称为单标签,自成一体,无法包裹内容
标签与标签之间的关系分为:父子关系(嵌套关系);兄弟关系(并列关系)
(1)排版标签
一.标题标签
1.代码:h系列标签
<h1> 1级标题 </h1>.....<h6>6级标题</h6>
2.特点:文字都有加粗,h1~h6文字逐渐减小,独占一行
Alt+Shift+下:复制粘贴到下一行
Ctrl+d:选中一样的2个文字,每按一次叠加一个文字
二.段落标签
1.代码:<p>内容</p>
2.特点:段落之间存在间隙;独占一行
三.换行标签
1.代码:<br>
2.特点:单标签;让文字强制换行
四.水平线标签
1.代码:<hr>
2.特点:单标签;在页面中显示一条水平线
(2)文本格式化标签
代码:1.<b> ,<strong>:加粗
2.<u>,<ins>:下划线
3. <i>,<em>:倾斜
4.<s>,<del>:删除线
特点:双标签
Alt+z:自动换行
(3)媒体标签
一.图片标签
代码:<img src=“ ” alt=“ ”>
特点:单标签
属性:
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没用顺序中之分
属性名:src (图片路径)
属性名:alt(替换文本)
注:当图片加载失败时,才显示alt的文本
属性名:title(提示文本)
注:当鼠标悬停时,才显示的文本;title属性不仅仅可以用于图片标签,还可以用于其他标签
属性名:width和height(宽度和高度)
注:如果只设置其中一个,另一个会自动等比例缩放(此时图片不会变形);如果同时设置2个,若设置不当此时图片可能会变形
二:音频标签(目前只支持3种格式:mp3,wav,ogg)
代码:<audio src=" " controls></audio>
常见属性:
属性名:src(音频的路径)
controls(显示播放的控件)
autoplay(自动播放)
loop(循环播放)
三.视频标签(目前支持3种格式:mp4,webm,ogg)
代码:<video src=" " controls></video>
常见属性:
属性名:src(视频的路径)
controls(显示播放的控件)
autoplay(自动播放)(谷歌需要再加muted会静音播放)
loop(循环播放)
(4)链接标签
代码:<a href="./目标网页.html" target="-blank">提示内容</a>
特点:内部可以包裹内容,如果需要a标签点击之后去指定页面,需要设置a标签的href属性
#(空链接)
属性名:target(目标网页的打开形式)
取值:1.-self:默认值,在当前窗口中跳转(覆盖网页)
2.-blank:在新窗口中跳转(保留原网页)
(5)列表标签(去掉显示前的标识:list-style:none)
一.无序列表
标签名:ul(表示无序列表的整体,用于包裹li标签)
li(表示无序列表的每一项,用于包含每一行的内容)
特点:列表的每一项前默认显示圆点标识
注:ul标签中只允许包含li标签,li标签可以包含任意内容
二.有序列表
标签名:ol(表示有序列表的整体,用于包裹li标签)
li(表示无序列表的每一项,用于包含每一行的内容)
特点:列表的每一项前默认显示序号标识
注:ul标签中只允许包含li标签,li标签可以包含任意内容
三.自定义列表
标签名:dl(表示自定义列表的整体,用于包裹dt/dd标签)
dt(表示自定义列表的主题)
dd(表示自定义列表的针对主题的每一项内容)
特点:dd前会默认显示缩进效果
注:dl标签中只允许包含dt/dd标签,dt/dd标签可以包含任意内容
(6)表格标签
标签名:table(表格整体,可用于包裹多个tr)
tr(表格每行,可用于包裹td)
td(表格单元格,可用于包裹内容)
注:标签的嵌套关系:table>tr>td
表格相关属性:border(边框宽度)
width(表格宽度)
height(表格长度)
注:表格相关属性加在table里
一.表格标题和表头单元格标签
标签名:caption(表示表格整体大标题,默认在表格整体顶部居中位置提示)
th(表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示)
注:caption标签书写在table标签内部;th标签书写在tr标签内部(用于替换td标签)
二.表格的结构标签(让浏览器和别人知道你的结构)(了解就行)
标签名:thead(表格头部)
tbody(表格主体)
tfoot(表格底部)
注:表格结构标签内部用于包裹tr标签;表格的结构标签可以省略
三.合并单元格
上下合并——只保留最上的,删除其他代码
左右合并——只保留最左的,删除其他代码
属性名:rowspan(合并单元格的个数)(跨行合并)
colspan(合并单元格的个数)(跨列合并)
注:只有同一个结构标签中的单元格才能合并,不能跨结构合并(不能跨:thead,tbody,tfoot);写在标签里
(6)表单标签(用在登录,注册,搜索时)表单标签: <form>
一.input系列标签
标签名:input(通过type属性值的不同,展示不同效果)
type属性值: text(文本框,用于输入单行文本)
相关属性:1.placeholder(占位符。提示用户输入的文本)
password(密码框,用于输入密码)
相关属性:1.placeholder(占位符。提示用户输入的文本)
radio(单选框,用于多选一)
相关属性:1.name(分组。有相同name属性值的单选框为一组,一组中同时只能有一个被选择)
2. checked(默认选中)
checkbox(多选框,用于多选多)
相关属性:1.name(分组。有相同name属性值的单选框为一组,一组中同时只能有一个被选择)
2. checked(默认选中)
file(文件选择,用于之后上传文件)
相关属性:1.multiple(可多文件选择)
submit(提交按钮,点击之后提交数据给后端服务器)
reset(重置按钮,点击之后恢复表单默认值)
button(普通按钮,默认无功能,之后配合js添加功能)
注:实现按钮功能需要配合form标签使用,用form标签把表单标签一起包裹起来即可
form(框起需要点提交和重置按钮的内容)
二.button按钮标签
标签名:button(通过type属性值的不同,展示不同效果)
type属性值(同input的按钮系列)
submit(提交按钮,点击之后提交数据给后端服务器)
reset(重置按钮,点击之后恢复表单默认值)
button(普通按钮,默认无功能,之后配合js添加功能)
注:谷歌浏览器中button默认是提交按钮;button是双标签,更便于包裹其他内容,文字,图片等
Ctrl+Enter:将光标直接到下一行
三.select下拉菜单标签
标签:select(下拉菜单的整体)
option(下拉菜单的每一项)
属性:selected(下拉菜单的默认选中)
四.textarea文本域标签
标签:textarea
特点:双标签
属性:cols(规定了文本域内可见宽度)
rows(规定了文本域内可见行数)
注:右下角可以拖拽改变大小;实际开发时针对样式效果推荐用css设置
五.label标签(绑定内容与表单标签的关系)
使用方法:直接使用albel标签把内容(如:文本)和表单标签一起包裹起来;需要把label标签的for属性删除即可
(7)语义化标签
一.没有语义的布局标签
标签名:div(一行只显示一个,独占一行)
span(一行可以显示多个)
二.有语义的布局标签(了解就行)
header:网页头部
nav:网页导航
footer:网页底部
aside:网页侧边栏
section:网页区块
article:网页文章
注:手机端做网页时用上
(8)字符实体:网页中展示特殊符号效果时,使用字符实体替代
描述:空格
实体名称:
表单标签
-
表单标签: <form>
-
表单属性:
-
action: 规定表单提交时,向何处发送表单数据,表单提交的URL。
-
method: 规定用于发送表单数据的方式,常见为: GET、POST。
-
GET:表单数据是拼接在url后面的, 如: xxxxxxxxxxx?username=Tom&age=12,url中能携带的表单数据大小是有限制的。
-
POST: 表单数据是在请求体(消息体)中携带的,大小没有限制。
-
-
-
表单项标签: 不同类型的input元素、下拉列表、文本域等。
-
input: 定义表单项,通过type属性控制输入形式
-
select: 定义下拉列表
-
textarea: 定义文本域
-
表单项
input>: 表单项 , 通过type属性控制输入形式。
-
type取值 描述 text 默认值,定义单行的输入字段 password 定义密码字段 radio 定义单选按钮,<label>点击所有地方都能聚焦到按钮上 checkbox 定义复选框 file 定义文件上传按钮 date/time/datetime-local 定义日期/时间/日期时间 number 定义数字输入框 email 定义邮件输入框 hidden 定义隐藏域 submit / reset / button 定义提交按钮 / 重置按钮 / 可点击按钮 -
<select>: 定义下拉列表, <option> 定义列表项
-
<textarea>: 文本域