HTML初学者保姆级知识总结

一、简介:

HTML 全拼 Hyper Text Markup Language,指的是超文本标记语言。标签是由尖括号包围的关键词,如<html>,</html>,他们成对出现,分别称 为开始标签与结束标签,不同的标签代表不同的含义。

Web 浏览器在读取 HTML 文件 时,浏览器使用标 签来解释页面的内容,最终显示出我们所熟知的网页。

二、HTML整体标签结构

DOCTYPE
全拼 Document Type 明确说明当前文档为 HTML 文档类型。浏览器根据你 DOCTYPE 定义的 DTD(文档类型定义)来解释页面代码。
HTML
限定文档开始点与结束点,在他们之间是文档的头部和主体,即 head body
HEAD
头部定义文档的头部,是所有头部元素的容器,在其中 可以指示引用脚本 (JavaScript )、样式表( CSS )、提供元信息等等。 文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及 和其他文档的关系等。绝大多数文档头部包含的数据都不会作为内容显示到浏览器。
Head 中可用标签如下:
<base>, <link>, <meta>, <script>, <style>, <title>
1、base
为页面上的所有链接规定默认地址( href )或默认目标( target

图片的访问地址

 2、meta

提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

GB2312 国标码

UTF-8万国码,国际通用编码

乱码:编解码不一致,导致乱码发生

3、   style
设置文档中引用的 css 样式。
4、  script
设置文档中使用的 JavaScript 脚本。
5、 link
通过地址应用外部的样式或脚本文件。
6、title
文档标题

 

三、常用标签

1、 标题 h1-h6 (每个标题标签对应一行,并且上下有距离 )

 

2、 段落 P一个 P 标签对应一行,并且上下都存在着间距

 3、 超链接或锚 a

从一张页面链接到另一张页面或在当前在当前页面从一个链接跳到相应的锚点(Href 规定链接指向的地址的 URL ,此处为相对地址 )
链接跳转:
_self ,在同一框架或窗口中打开所链接的文档。此参数为默认值,通常不用指定
_blank 新浏览器窗口中打开链接文件
_top ,在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架
_parent ,将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链
接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象 _self 参数一
样。
4 、 行内标签 span
用来组合文档中的行内元素 span ,没有固定的格式表现。当对它应用样式时,它才会产
生视觉上的变化 font-family 表示字体, font-size 表示字体大小, 2em 为默认字体大小的
2 倍。

 

5 、 下标 sub
高度的一半

 

 6、 上标 sup

7 、 图片 img
向网页中嵌入一幅图像,可以使本地的,也可以是网络的
Src 规定显示图像的 URL
alt 规定图像的替代文本即图片显示不出来时的文本信息(如图片地址错误)
width 设置图片的宽度
height 设置图片的显示高度

 

 

8 、 格式化文本 pre
被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
在 pre 中的内容按照文档中的格式显示,其中<为<,>为>," 为”,并且在其中可以使用 a 或 img 标签等。

 

 9、 文本滚动(跑马灯)marquee

Behavior 滚动的方式,alternate 文本来回滚动,scroll 屏幕上开始从右边滚动出来再从左
边滚动出去,如此重复,slide 屏幕上没有,从右边滚动出来再从左边滚动出去
Bgcolor 设置背景颜色,三种设置颜色的方式均可
Direction,down 文本从上相下开始,left 从邮箱做开始,right 从左向右开始,up 从下向
上开始
另外还可以设置宽度 width,高度 height 属性,设置 loop 表示滚动的次数,默认为-1 表
示一直滚动下去,scrollamount 活动字幕的滚动速度,单位 pixels(像素),scrolldelay 活
动字幕滚动两次之间的延迟时间,单位 millisecond(毫秒),通常会和鼠标的移入移除事
件结合一起使用。

 

10 无序列表 ul li

 

11 有序列表 ol li(li 定义列表项目 )
Type 可以取值 1 A a I i ,还可以同过 start 设置序号的起始值(对数值数据才有效),
h5 中可以通过 reverse 属性设置顺序为降序

 

 

12
自定义列表 dl dt dd
Dl 定义列表
Dt 列表中的项目
Dd 描述列表中的项目

 

13 划分图层 Div 全称 division
把文档分割为独立的、不同的部分。如果用 id class 来标记 <div> 添加额外的样式,
那么该标签的作用会变得更加有效。 <div> 是一个块级元素,也就是说,浏览器通常会
div 元素前后放置一个换行符。

 四、 表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割
为若干单元格(由 <td> 标签定义)。在 td 中填写数据( table data ),即表格的内容。
其中数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格(使用相应
的标签就好)等等。
只需要在 table 标签里面加上 border="1",便可为表格加上边框,数字表示边框的宽度
pixels(像素)
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定
义表格行,th 元素定义表头,td 元素定义表格单元。
其中还有一些属性,如 cellpadding 固定单元格语气内容之间的空白(%值,像素值,
两种取值方式一个是包含元素的百分比,一个是具体的像素值),cellspacing 规定单元
格之间的空白(%值,像素值),width 规定表格的宽度,非单元格的宽度(%值,像素
值),frame 规定外侧哪个部分是可见的,rules 规定内侧哪个部分是可见的

五、 表单

表单使用 form 标签,其中可以设置多个属性值,如 action 表示表单提交
后链接到什么地方(url),method 提交方式,分为 get 与 post 两种,当为
get 时,要提交的表单数据作为参数会拼在 action 对应地址的后面,当为 post
时,提交内容不会拼在 url 地址后面,安全性更高。Accept-charset 规定在被
提交表单中使用的字符集(默认:页面字符集),enctype 规定被提交数据的编码(默认:
url-encoded),name 规定识别表单的名称,novalidate 规定浏览器不验证表单,target 规定
action 属性中地址的目标(默认:_self)。常用的属性有 action 与 method,其他根据需求
而定。
介绍了 form 之后,我们来说一下 form 表单内部所写的的 input 标签,如上所示,input
标签可以作为简单的文本输入框,密码输入框(输入内容显示为点符号),复选框,登录按
钮。其所依据的便是 input 标签的 type 属性。
Text 表示文本输入, password 密码方式, hidden 隐藏域在页面中对用户是不可见得, radio 单选按钮, checkbox 复选按钮, file 文件, image 图片, reset 重置按钮,点击时会将页面所填写内容重置为初始装填, submit 点 击直接提交表单,执行 action 跳转, button 点击不会提交表单,可以通过 onclick 事件 执行脚本实现提交的目的。 Input 除了 type 属性外,还有 name 属性,表示当前标签所对应的名字,在提交后作为 发送到服务器的参数名。单选按钮与复选按钮的 name 属性需要注意,他们是一致的, value 规定 input 元素的值, checked 表示首次加载时应当被选中,如示例中的 radio , 另外还有 disabled ,表示禁止使用这个元素, readonly 表示不能对其修改。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值