为了账号安全,请及时绑定邮箱和手机立即绑定

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>

    <meta charset="UTF-8">

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

    <meta charset="UTF-8">

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

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

    <br/>

    通过创建锚点,

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

    <!--加这一堆br是为了增加页面高度,不然显示不出锚点效果-->

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br>

 

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

    <hr/>

        为目标内容(即锚点)创建id 并赋值

    <br/>

        将超链接文本与锚点的id 关联,&lt;a href="#id名称"&gt; 超链接文本 &lt;/a&gt;

</body>

</html>

6、<base> 标签

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>base 标签</title>

 

    <!--指定页面中所有超链接的默认打开方式为 blank -->

    <base target="_blank">

</head>

<body>

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

    <br/>

 

    <!--虽然 head 中设置了base,但此处依旧可以单独指定打开方式为 self,实现重载-->

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

    <meta charset="UTF-8">

    <title>无序列表 ul</title>

</head>

<body>

    <ul>

        <li>无序列表1</li>

        <li>无序列表2</li>

        <li>无序列表3</li>

        <li>无序列表4</li>

    </ul>

 

</body>

</html>

注意:


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

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

(2)、有序列表 <ol></ol>

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

</head>

<body>

    <ol >

        <li>有序列表1</li>

        <li>有序列表2</li>

        <li>有序列表3</li>

        <li>有序列表4</li>

    </ol>

</body>

</html>

(3)、自定义列表 <dl></dl>

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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

    <meta charset="UTF-8">

    <title>表格</title>

</head>

<body>

<table cellspacing="3" cellpadding="2" border="1">

    <tr>

        <td>第一行第1列</td>

        <td>第一行第2列</td>

        <td>第一行第3列</td>

    </tr>

    <tr>

        <td>第二行第1列</td>

        <td>第二行第2列</td>

        <td>第二行第3列</td>

    </tr>

</table>

</body>

</html>

12、表头标签

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

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

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

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



<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>表头</title>

</head>

<body>

<table border="1" cellspacing="1" cellpadding="10">

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

    <tr>

        <th>属性</th>

        <th>含义</th>

        <th colspan="2">取值</th>

    </tr>

    <tr>

        <th>border</th>

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

        <td>像素值,默认0</td>

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

    </tr>

    <tr>

        <th>cellspacing</th>

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

        <td>像素值,默认2</td>

    </tr>

    <tr>

        <th>cellpadding</th>

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

        <td>像素值,默认1</td>

    </tr>

</table>

</body>

</html>


点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消