HTML基础,小白都能看得懂的文章

tech2024-07-28  57

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:禁用属性 只读和禁用的例子

最新回复(0)