前端入门—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/)

(0)

相关推荐