前端入门—HTML篇(秃头之路正式开启)
1.网页的构架
网页是只因特网,根据一定的规则,使用HTML制作的用于展示特定内容的相关页面集合
网页构成网站的基本元素,图片 链接 文字 音频 视频等元素
HTML成为超文本标记语言,超越文本的限制,注:HTML不是变成语言
2.WEB标准
Web标准是由W3C(万维网联盟)制定的一系列标准的集合
浏览器的不同,他们显示排版或者页面页有一定的差异,可以通过web标准来展示统一的内容
1.让 Web 的发展前景更广阔。
2.内容能被更广泛的设备访问。
3.更容易被搜寻引擎搜索。
4.降低网站流量费用。
5.使网站更易于维护。
6.提高页面浏览速度
web标准的构成主要分为三个方面
结构 HTML
行为 JavaScript
表现 CSS
3.HTML骨架(基本结构)标签
<html></html>
HTML标签 页面中最大的标签 称之为根标签
<head></head>
head标签文档的头部 在head标签中,必须包含tilte 标签
<title></title>
title文档的标题 设置页面的网页标题
<body></body>
body文档的主体
4.HTML结构刨析
图片
5.常见得浏览器和浏览器内核
IE
Trident
火狐 firefox
Gecko
谷歌 chrome
Blink
Safari
Webkit
Opera
Blink
6.标签语义化
h1~h6
每个页面只能出现一个h1标签,h1~h6标签是从大到小,数字越大标题越小
独占一行 有默认的宽高
p
一行显示多个,不可以嵌套同级标签,
div
块级元素,独占一行,无语义,
sup
上角标
sub
下角标
em i
字体倾斜标签,常用em 语义化更突出
strong b
加粗标签,常用strong语义化更突出
有序列表
ul li
ul 里面只能放li
li 里面可以放任何元素
无序列表
ol li
ol 里面只能放li
li 里面可以放任何元素
自定义列表
dl`` dd`` ``dt
dl里面可以放dd和dt
dd和dt 属于兄弟关系
dd和dt里面可以放任何元素
表格标签
table 表格
th 表格头部
tr 表格行
td 单元格
表格属性
此代码存在兼容问题 建议使用CSS代码 border-collspse:collapse;来设置
cellspacing 设置单元格之间的距离
cellpdding 设置单元格和内容的距离
colspan 跨行合并 从左至右 合并代码写在第一个单元格上
rowspan 跨列合并 从上至下 合并代码写在第一个单元格上
图片标签
img 引用或者插入图片到网页当中
图片属性
src 是img必须的属性,不可缺少
alt提示文本在网页无法加载或者加载出错的时候显示提示信息,只能在img中使用
title 提示文本,当鼠标经过时提示信息,可以在任何元素中使用
7.路径的使用
绝对路径
相对于计算机的盘符,或者指定的网址链接的路径,如HTTP 、/https://
可以移植性为0不建议使用
相对路径
上一级路径 ../
下一级路径/
同级路径./ 同级路径可以直接书写文件名
8.标签元素分类
块级元素
独占一行
没有设置宽高的情况下默认宽度为父盒子的宽度
可以单独设置宽高
代表性元素:h1-h6,p,div,ul,li,ol,li
特点:
行内元素
一行多个,一行可以放置多个行内块元素
宽度为内容的宽度,内容越长宽度越宽,(宽度由内容撑开)
不可以直接设置宽高(可以转换属性后设置)。
代表元素:span,格式化标签(具体查询W3C)
特点:
行内块元素
一行可以放置多个。
可以直接设置宽高。
代表元素:img,input
特点:
总结:
1.块元素一行只能放一个,可以直接设置宽高。
2.行内元素一行放置多个,不可以直接设置宽高。
3.行内块元素,综合上述两者的特性,一行多个,可以设置宽高。
9.超链接标签
<a href:=""></a> 超链接必须有内容才能点击
属性值:
href:超链接必须的属性,用来链接文件或者网站
txt: 链接后缀为txt的文件,点击查看。
pdf: 链接后缀为pdf的文件,点击查看。
zip: 链接后缀为zip的文本,点击下载。
target属性
_self:是默认值,表示在当面页面打开新的页面。
_blank :表示在新的窗口页打开。
超链接属性的四种状态
默认的书写顺序, link-visited-hover-active.
link: 表示未被访问过的状态,默认是蓝色。
visited:表示被访问过后的状态,默认紫色。
active: 被激活时候的状态,默认红色。(移上鼠标未点击)
hover: 可用于所有标签,表示鼠标浮上的状态。
10.表单元素
input 表单元素
属性:
text:单行文本框
password:密码框
radio:单选框(实现单选需要给相同的单选框加上name属性)
checkbox:多选框
file:文件域属性,上传文件
hidden:隐藏域
image:图片域 (引入图片作为提交按钮)
submit:提交按钮(在表单中提交数据给后台)
button:普通按钮
reset:重置按钮
type:定义input框的类型
name:表示给input起一个名字,或者在单选复选的时候起到关联作用。
value:给表单元素一个默认值,几乎所有的表单元素都可以给。
form标签,定义表单元素,在需要提交数据的时候input元素必须包括在form表单里面才能实现。
属性值action=""需要提交的服务器地址。
method:提交数据的方式有两种get和post默认get。
get和post提交数据方式区别在于,一个提交数据拼接在地址后面,一个提交数据页面不可见,需要通过f12查看。
get请求数据不安全,post比较安全
get请求数据限制长度post不限制请求数据的长度。
text area:文本域
cols:设置文本的列数
rows:设置文本的行数
select下拉列表
option 定义下拉列表项。
placeholder:input框里面的提示信息,不占位置,不会提交给后台。
checked="checked":设置单选框和复选框的默认选中状态。
selected:下拉列表的默认选中状态,属于option的属性。
size:表示下拉列表显示的选项个数,属于select的属性。
label:点击文字聚焦在input框中,也可以使用label的for属性,id等于for设置的名字,起到聚焦的效果。
基础的HTML结构和标签就简单介绍这些,学习的过程是痛苦的,但是坚持下去你才能收获更大的果实,完成你更宏大的梦想
本文来源:IT技术传播 微信公众号
文章编辑:标梵互动(https://www.biaofun.com/)