前端入门—HTML篇(秃头之路正式开启) / 开普饭

1.网页的构架

网页是只因特网，根据一定的规则，使用HTML制作的用于展示特定内容的相关页面集合

网页构成网站的基本元素，图片链接文字音频视频等元素

HTML成为超文本标记语言，超越文本的限制，注：HTML不是变成语言

2.WEB标准

Web标准是由W3C(万维网联盟)制定的一系列标准的集合

浏览器的不同，他们显示排版或者页面页有一定的差异，可以通过web标准来展示统一的内容

1.让 Web 的发展前景更广阔。

2.内容能被更广泛的设备访问。

3.更容易被搜寻引擎搜索。

4.降低网站流量费用。

5.使网站更易于维护。

6.提高页面浏览速度

web标准的构成主要分为三个方面

结构 HTML

行为 JavaScript

表现 CSS

3.HTML骨架(基本结构)标签

HTML标签页面中最大的标签称之为根标签

head标签文档的头部在head标签中，必须包含tilte 标签

title文档的标题设置页面的网页标题

body文档的主体

4.HTML结构刨析

图片

5.常见得浏览器和浏览器内核

Trident

火狐 firefox

Gecko

谷歌 chrome

Blink

Safari

Webkit

Opera

Blink

6.标签语义化

h1~h6

每个页面只能出现一个h1标签，h1~h6标签是从大到小，数字越大标题越小

独占一行有默认的宽高

一行显示多个，不可以嵌套同级标签，

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/)

前端入门—HTML篇(秃头之路正式开启)

相关推荐