HTML基础,小白都能看得懂的文章
W3C
• World Wide Web Consortium(万维网联盟)
• 成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准
1.结构化标准语言(XHTML,XML)
2.表现标准语言(CSS)用来美化页面
3.行为标准(DOM.ECMAScript)通俗的来说就是增加前端页面的功能
常用标签
标签总的可以分为三大类,块级元素,行内元素,行内块元素
块级元素
块级元素:自己独占一行,可以设置宽高
常见的块级元素
p标签 h标题标签 div标签 hr分割线标签 li列表标签
列表的特性
列表可以分为三大类:无序列表,有序列表,定义列表
无序列表
特性:
1.没有顺序,每个li标签独占一行(块元素)
2.默认的li标签前面有个实心小圆点
补充:如果tr标签里面再嵌套一个ul>li标签的话,默认
用途:网站导航栏,侧边栏新闻,有规律的图文组合模块等
再补充:列表可以通过list-style:none;来将列表前面的实心小圆点去掉,或者用list-style-image:url(“图片地址”)来将小圆点替换为指定图片
有序列表
特性:
1.有顺序,每个li标签独占一行(块元素)
2.默认li标签项前面有顺序标记
3.一般用于排序类型的列表,如试卷,问卷选项等
定义标签
特性:
1.没有顺序,每个dt标签,dd标签独占一行(块元素)
2.默认没有标记
3.一般用于一个标题下有一个或多个列表项的情况
dl:用来声明实现列表
dd:定义列表项
dt:定义列表项内容
行内元素
特点:与其他行级元素共享一行,但是不能设置宽高
常见行内元素标签
img:图片标签
常用属性:
src:用来去链接图片的地址
alt:图片显示不出来时的替代文字
title:图片的提示文字
width:图片的宽度
height:图片的高度
补充:虽然img是块级元素,不能设置宽高,但是它的图片的宽高可以设置,这里不要误解。
a:超链接标签
常用属性:
href:想要链接到的地址
name:设置锚点
实例:如果想要在本页面实现跳转的话,通过在要被跳转到的那个位置设置一个name属性,也叫锚点,然后在要实现跳转的位置设置href="#name的属性值"来实现跳转。
target:跳转的方式
它的属性值有四个:
_blank:在新的页面打开,也是默认值
_self:在自身打开(当前页面)
_parent:在父页面打开
_top:在顶技页面打开
补充:也可以在iframe框架中打开页面
em:斜体
strong:字体加粗
特殊符号
表格
由行,列以及单元格组成,特点是结构简单且稳定
table>tr>td
常用属性:
colspan:跨列合并单元格
rowspan:跨行合并单元格
th:是table header的缩写,因此它是表头
tbody:表体主体内容
tfooter:表格底部
注意:th标签要写在tr标签里面,相当于替代了td标签,tbody标签和tfooter标签要写在tr标签外面,里面依旧写tr>td标签
多媒体
常用的标签:音频和视频
音频:audio标签
视频:video标签
常用属性:
src:音频或者视频的地址
controls:控制视频或者音频开始停止的开关
autoplay:设置音频或者视频自动播放
内联框架 iframe
内联框架是在浏览器内部产生的子浏览器,不能够作为前端显示,可以将其放置在后端,尤其是管理界面使用。
这个可以实现通过点击上面的三个超链接中的任意一个,然后在iframe框架中,显示出你点击的超链接之后该跳转的网页
具体实现步骤:通过在iframe框架中设置它的name属性,然后在那三个超链接中通过设置target=“iframe中的name的属性值”来实现跳转
scrolling:它的三个值,yes表示始终有滚动条,no表示始终没有滚动条,auto表示自动添加滚动条,当内容太多超出边框时,自动添加滚动条。
表单元素
重要属性:
name:文本框名字
value:文本框初始值 显示在文本框中的初始值,与placeholder不同的是,placeholder是提示文字,而它的文字可以删除
size:文本框长度
maxlength:文本框可输的最多字符
与文本框常用属性相差无几,但是它的特点就是输入的内容是不可见的。
常用属性:
name:要将同一组内的单选框的name属性都设置为相同值,这样才可以实现单选的功能。
type:radio 表示单选框
value:值,如果表单以get方式提交的话,那么就可以在url地址栏中看到这个值
checked:表示默认单选按钮选中状态
常用属性:
name:同样同一组内的复选框的name属性要设置为相同的
type:checkbox表示复选框
value:值,与单选框的一样
checked:复选框按钮默认选中状态
实现标签;
select>option
select是列表框
option是选项
常用属性:
name:下拉列表名称
size:下拉的行数
selected:默认选中项
常用属性
type:
它有四个属性值:
reset:重置按钮
image:图片按钮,也可以作为提交按钮提交
button:普通按钮
submit:提交按钮
value:它的值将会是按钮上显示的文字
使用textarea标签实现,而不是input标签了
常用属性:
cols:显示的列数
rows:显示的行数
type:file文件域
enctype:表单编码属性
type:email
可以通过写正则表达式来验证邮箱输入的是否正确
步骤:在input标签设置pattern属性,它的属性值就是正则表达式
type:url 也就是网址
type:number数字
min:允许的最小值
max:允许的最大值
step:合法的数字间隔
step就是你点击那个上下按钮的时候它增加的数,如果step是2,那么他就以每次增加2来增长。
type:range 滑块
其他属性和number的基本一样
type:search 搜索框
属性:
type:hidden 隐藏域
常用属性:
readonly 只读属性
disabled:禁用属性
只读和禁用的例子