首页手记 HTML 入门

HTML 入门

标签：

Html5

一、浏览器内核分类(cxhhnr)

Trident——IE/Edge浏览器使用

Gecko——火狐浏览器使用

Webkit——safari浏览器使用

Chromium/Blink——Chrome浏览器使用

Presto——Opera浏览器使用（新版Opera已经使用Blink内核）

二、Web标准构成

Web标准是由W3C及其他标准化资质制定的标准集合。包括：结构（Structure）、表现（Presentation）、行为（Behavior）

结构标准：用于对网页元素进行整理和分类，包括 xml、xhtml 两部分

样式标准：用于设置网页元素的版式、颜色、大小等外观，主要指 Css

行为标准：网页模型的定义及交互的编写。包括 DOM和ECMAScript两部分

所以，理想状态下，一个网页的源码中需要包含：.html、.css、.js

三、html基本骨架

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

</body>

</html>

1、<!DOCTYPE>

<!DOCTYPE>位于文档的最前面，用于向浏览器说明当前.html文件使用的是哪种HTML或者XHTML标准规范。浏览器会按照此处指定的规范对html文件进行解析。

HTML5可以向下兼容，所以，现在直接指定为<!DOCTYPE html>即可。

2、charset（字符编码集）

GB2312：简体中文字符集，含6763个常用汉字

BIG5：繁体中文，港澳台地区使用

GBK：含全部中文字符，是对GB2312的扩展，支持繁体字

UTF-8：支持中文和英文等，是最常用的字符集

四、HTML标签

HTML大量使用语义化标签，所谓语义化就是见名知意，

1、排版标签

（1）、标题标签 <h1></h1>

h 即 head 的简写

有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种，从左到右字号依次变小。

基本格式<h1></h1>

像<h7>这种错误的标签在展示时不起作用

（2）、段落标签<p></p>

p 即 paragraph 的简写

基本格式<p>段落内容</p>

段落中的文本内容超出浏览器宽度之后会执行自动换行

（3）、水平线标签<hr />

hr 即 horizontal 的缩写

其作用是在页面中插入一条水平线

基本格式<hr />

这是一个自闭合标签。（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）

（4）、容器标签 <div></div> 和 <span></span>

div 即 division 的缩写，分割、区分的意思

span 即 span ，跨度、范围的意思

这俩本质上是一个容器，类似于 Android 中的ViewGroup

基本格式<div>这是div标签中的内容</div> <span>这是span标签中的内容</span>

2、文本格式化标签

标签效果

<b></b>、<strong></strong> 加粗，XHTML推荐使用<strong>

<i></i>、<em></em> 斜体，XHTML推荐使用<em>

<s></s>、<del></del> 删除线，XHTML推荐使用<del>

<u></u>、<ins></ins> 下划线，XHTML推荐使用<ins>

3、标签的属性

基本格式：<标签名属性1=”属性值1“ 属性2=”属性值2“></标签名>

标签可以拥有多个属性

属性必须写在开始标签中，位于标签名后面

属性之间不区分顺序

标签名与属性、属性与属性之间使用空格隔开

任何属性都有默认值，省略该属性表示使用默认值

4、图像标签 <img />

img 即 image 的缩写

基本格式<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图片URI/URL" />

<img />常用属性如下：

属性属性值属性含义

src URI/URL 图像的路径

alt 文本图像无法正常显示时的提示文本

title 文本鼠标悬停于图像时显示的文本

width 像素（XHTML 不支持按页面百分比显示）图像的宽度

height 像素（XHTML 不支持按页面百分比显示）图像的高度

border 数字设置图像边框的宽度

设置图像的宽高时，如果想等比缩放，则只设置其中一个即可

5、超链接标签

(1)、超链接标签<a></a>

anchor 的缩写

基本格式 <a href="跳转目标url" target="目标窗口的弹出方式">超链接文本或图像</a>

href 即 HyperText Reference , 指定要跳转的URL地址

target , 指定目标窗口的打开方式。取值为 self / blank , self 为默认值，blank 表示新窗口打开

注意：

外链需要添加 http:// 或 https:// 前缀

内部链接直接链接内部页面名称即可，如 <a href="index.html">首页</a>

如果当时没有确定链接目标时，可以为 href 赋值为 “#” ,即 href="#",表示一个空连接

各种网页元素，如文本、图像、表格、音频、视频等都可以作为超链接的载体

<!DOCTYPE html>

<html>

<head>

<title>超链接文本示例</title>

</head>

<body>

<a href="https://www.jianshu.com/u/414acf7abc2b" target="_blank">CnPeng简书</a>

<br/>

<a href="https://blog.csdn.net/north1989">CnPeng CSDN</a>

<br/>

<a href="aTag.html" target="_blank">内部链接--再打开一个aTag.html</a>

<br/>

<a href="#">空的超链接</a>

</body>

</html>

（2）、锚点

通过创建锚点，可以快速定位到目标内容区域

创建锚点分为两步

为目标内容（即锚点）创建id 并赋值

将超链接文本与锚点的id 关联，<a href="#id名称"> 超链接文本 </a>

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

<a href="#createAnchor">点击跳转到锚点位置</a>

<br/>

通过创建锚点，

可以快速定位到目标内容区域

<h3 id="createAnchor">创建锚点分为两步</h3>

<hr/>

为目标内容（即锚点）创建id 并赋值

<br/>

将超链接文本与锚点的id 关联，<a href="#id名称"> 超链接文本 </a>

</body>

</html>

6、<base> 标签

<base> 标签可以限定同一页面内所有超链接的打开方式。<base target="_blank">

设置 <base> 之后依旧可以为某个单独的超链接设置打开方式。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="https://www.jianshu.com/u/414acf7abc2b" >CnPeng简书</a>

<br/>

<a href="https://blog.csdn.net/north1989" target="_self">CnPeng CSDN</a>

<br/>

<a href="aTag.html">内部链接--再打开一个aTag.html</a>

<br/>

<a href="#">空的超链接</a>

</body>

</html>

<img /> 、 < br/>、 <hr />、<base/> 都是自闭合标签

7、转义字符

8、注释标签

格式为 < !-- 注释内容 -- >

9、路径

（1）、相对路径

图像文件和HTML文件位于同一文件夹中，只需要输入图像文件的名称即可，<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="logo.gif"/>

图像文件位于Html文件的下一级文件夹，输入文件夹名和文件名，二者之间用“/” 隔开，<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image/logo.gif"/>

图像文件位于HTML文件的上一级，在文件名之前加 " ../ ", 上两级则使用 " ../../ ",依次类推。<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../image/logo.gif"/>

(2）、绝对路径

本地绝对路径： D:\web\img\logo.gif

网络绝对路径：https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700

10、列表标签

（1）、无序列表 <ul>

所谓无序列表就是以小圆点或者小方块作为行首标志的列表

无序列表的各项之间是并列的，没有顺序级别的区分

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</body>

</html>

注意：

<ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签

<li></li> 之间相当于一个容器，可以嵌套任意标签

（2）、有序列表 <ol></ol>

内部也是嵌套<li></li>

默认以 1、2、3...作为行首排序标志

<!DOCTYPE html>

<html>

<head>

<title>有序列表ol</title>

</head>

<body>

<ol >

</ol>

</body>

</html>

（3）、自定义列表 <dl></dl>

<dl></dl>为外层标签、<dt></dt>为内层标签、<dt> 下还可以嵌套 <dd></dd>

自定义列表项前不具有任何项目符号，既没有小圆点也没有1234

<!DOCTYPE html>

<html>

<head>

<title>自定义列表</title>

</head>

<body>

<dl>

<dt>自定义列表项1</dt>

<dd>自定义列表项1 的内容解释1</dd>

<dd>自定义列表项1 的内容解释2</dd>

<dt>自定义列表项2</dt>

<dd>自定义列表项2 的内容解释1</dd>

<dd>自定义列表项2 的内容解释2</dd>

</dl>

</body>

</html>

11、表格标签 table

<table></table> 用来定义表格，

<tr></tr> 用来定义行，嵌套在 <table></table> 中

<td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中

<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素

属性名称含义属性取值

border 表格的边框。默认 border="0",即无边框像素值

cellspacing 单元格与单元格边框之间的间距。

默认 cellspacing="2" 像素值

cellpadding 单元格内容与单元格边框的间距。

默认 cellpadding="1" 像素值

width 表格的宽度像素值

height 表格的高度像素值

align 表格在页面中的水平对齐方式 left 、center 、right

caption 标题文本

colspan 从当前列向后横跨几列, 应用于td、th 数字

rowspan 从当前行向下竖跨几行, 应用于td、th 数字

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

12、表头标签

表头一般位于表格的第一行或者第一列。

表头标签为 <th></th>，在显示的时候默认会显示为加粗的效果

增加表头时，使用 <th></th> 替代对应位置的 <td></td>即可

下图即是设置了表头的表格。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<caption>caption标签是啥？标题？</caption>

<tr>

</tr>

<tr>

<th>border</th>

<td>单元格边框</td>

<td rowspan="3">rowspan从当前单元格向下跨三行</td>

</tr>

<tr>

<th>cellspacing</th>

<td>单元格与单元格边框的间距</td>

</tr>

<tr>

<th>cellpadding</th>

<td>单元格内容与单元格边框的间距</td>

</tr>

</table>

</body>

</html>

点击查看更多内容

2人点赞

共同学习，写下你的评论

评论加载中...

作者其他优质文章

正在加载中

慕斯547404

手记

篇

粉丝

获赞与收藏

关注作者，订阅最新文章

阅读免费教程

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

热搜

最近搜索清空

HTML 入门

相关文章推荐

阅读免费教程