html总结

2018-07-28  本文已影响0人  Lins7

html是什么：超文本标记语言

html的唯一作用就是：给指定的文本添加语义。

html的标准格式：

<!DOCTYPE html>         

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

</html>

<!DOCTYPE html>作用：由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的编译/解析/渲染我们的网页, 我们需要在HTML文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的.

<html lang="zh-CN">lang属性作用：告诉各大搜索引擎，该页面的语言是简体中文

<head>作用：页面中的控制信息（不需要显示的信息）都写在head标签中

<meta charset="UTF-8">作用：告诉浏览器，body中的语言使用utf-8进行解码

<title>作用：告诉浏览器该页面的标题是什么

<body>作用：页面中的内容（需要浏览器显示的信息）都写在body标签中

所有标签都会用id属性（标识唯一），class属性（标识一类），他们的命名规则：

标签介绍：

标签特征：

容器级标签（可以嵌套其他标签）：div h ul ol dl li dt dd ...

文本级标签（只能嵌套文字、图片、超链接）：span p buis strong em ins del ...

块级元素：p div h ul ol dl li dt dd

行内元素：span buis strong em ins del

基础标签：

style标签：css代码的内联方法，使用方法在head中添加css代码，一般企业开发中大多使用外联的方法。

h1标签：用于给文本添加标题语义，h标签一共有6个，h系列标签是块级元素（display:block，独占一行）

格式：

<h1>xxxxxx</h1>

注意点：企业开发中，要慎用h系列标签，特别是h1标签，一个界面一般情况只能有1个h1标签。

p标签：告诉浏览器哪些文字是一个段落，p标签是块级元素（display:block，独占一行）

格式：

<p>xxxxxx</p>

hr标签：在浏览器上显示一条分割线（display:block，独占一行），不建议使用，修改样式通常使用css。

格式：

<hr />

br标签：让内容换行

格式：

<br />

img标签：在网页上插入一张图片（浏览器通过识别url自动请求获取图片，放到对应位置上）

格式：

<img src="images/banner.jpg" alt="err" title="手机图片">

属性介绍：

a标签：用于从一个页面链接到另一个页面，也可以做同一个页面不同位置的锚定跳转

格式：

<a href="[http://www.baidu.com](http://www.baidu.com/)" target="_blank" title="跳转百度">百度</a>

属性介绍：

注意点：

a标签的锚定跳转用法:

假链接（本质是跳转到当前页面）：

        <a href="#">博客</a>

        <a href="javascript:">博客</a>

跳转到当前页面指定位置（锚点位置）：

给指定位置的任意标签添加一个id属性，例如：<p id="location">这个是目标</p>

跳转到该锚点位置：<a href="#location">跳转到指定位置</a>

跳转到指定页面指定位置：

    <a href="锚点链接.html#location">跳转到指定位置</a>

div标签：一般用于配合css完成网页的基本布局（display:block，独占一行），在css布局时，通常使用class属性进行选择

格式：

<div class='xxx'>xxxxxx</div>

注意点：div是容器级标签，容器级标签的特点就是可以嵌套其他所有的标签

span标签：一般用于配合CSS修改网页中的一些局部信息

格式：

<p>努力到<span class='span'>无能为力</span>, 拼搏到<span>感动自己</span></p>

注意点：span标签是文本级标签，文本级标签只能嵌套文本、图片、超链接

article标签： 表示独立的自包含内容，如：一篇文章。文章中可包含头部标题（header标签）、内容、脚注（footer）

section标签：表示文档中的节（区块），一般是具有标题的，语义比article标签更弱一些，表示一块。

aside标签：标签定义其所处内容之外的内容， aside 的内容应该与附近的内容相关，可以做文章侧栏。

header标签：标签定义文档的页眉（介绍信息），如：标题

footer标签： 标签定义 section 或 document 的页脚，在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

nav标签： 标签定义导航链接的部分。

strong作用: 着重内容，文本样式默认加粗

格式:

<strong>着重内容</strong>

ins作用: 新插入的文本，文本样式默认下划线

格式:

<ins>新插入的文本</ins>

em作用:强调内容，文本样式默认斜体

格式:

<em>强调内容</em>

del作用: 已删除的文本，文本样式默认删除线

格式:

<del>已删除的文本</del>

[图片上传失败...(image-31e7f6-1532748685918)]

image.png

details标签：详情和概要标签

格式：

<details>

    <summary>概要信息</summary>

    详情信息

</details>

[图片上传失败...(image-f30584-1532748685911)]

image.png

注意点：

列表标签：

无序列表(unordered list)

ul标签: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后

li作用: li 英文是 list item, 翻译为列表项，li是在ul里面的子元素，一个ul中子元素的li不分先后

格式:

<ul>

    <li>北京</li>

    <li>上海</li>

    <li>广州</li>

    <li>铁岭</li>

</ul>

注意点：

1、浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义

2、浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面

3、由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签

4、虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签

定义列表(definition list)

dl标签: 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述

格式:

<dl>

    <dt>北京</dt>

        <dd>国家的首都, 看升国旗的地方</dd>

    <dt>上海</dt>

        <dd>魔都, 遍地是黄金的地方</dd>

</dl>

dl应用场景:

1、网站底部相关信息

2、但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl

注意事项:

表格标签：

table标签:以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

格式：

[图片上传失败...(image-be011c-1532748685918)]

image.jpeg 
<table>

    <tr>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td></td>

    </tr>

</table>

border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格指定边框宽度

width: 默认情况下表格的宽度是由内容自动计算出来的, 可以通过width属性指定表格的宽度

height:默认情况下表格的高度是由内容自动计算出来的, 可以通过height属性指定表格的高度

cellspacing: 外边距. 默认情况下单元格之间有2个像素的间隙, 可以通过cellpadding指定表格之间的间隙

cellpadding: 内边距. 默认情况下单元格边缘距离内容有1个像素的内边距, 可以通过cellpadding属性指定单元格边缘和内容之间的内边距

align: 规定表格相对周围元素的对齐方式, 它的取值有center（居中）、left（居左）、right（居右）

valign: 规定表格相对周围元素的对齐方式, 它的取值有middle（居中）、top（居上）、bottom（居下）

bgcolor:规定表格的背景颜色

使用实例：

使用表格属性让快级元素中的多行文字水平垂直居中：

html代码：

<div class="parent">

    <p class="son">会议认为，党的十八大以来，我国经济发展取得历史性成就、

    发生历史性变革，为其他领域改革发展提供了重要物质条件。经济实力

    再上新台阶，经济年均增长7.1%，成为世界经济增长的主要动力源和稳定器。

    </p>

</div>

css代码：

.parent {

    display：table；   #设置成块级表格元素

    width：300px；

    height：300px；

    text-align：center；  #表格元素中的文本、图片、超链接水平居中

    }

.son {

    display：table-cell；  #设置为表格的单元格

    height：200px；

    background-color：yellow；

    vertical-align：middle；   #设置单元格的内容垂直居中

    }

表单标签：

form标签: 用于收集用户信息, 让用户填写、选择相关信息

格式:

    <form>

        所有的表单内容，都要写在form标签里面

    </form>

注意事项:

属性介绍：

在form标签中嵌套的常见标签：

input标签：form表单中的核心标签，通过input标签的type属性，可以选择不同的取值方式

格式:

<input disabled type="text" name="fullname" maxlength="8" placeholder='用户名' />

属性介绍：

type：设置input的类型，如下为常见类型

name：表单中需要提交的数据以 name：value 的形式所表示，name一般指名所提交的是什么信息，

value： 表单中需要提交的数据以 name：value 的形式所表示，value一般指名用户所提交的信息本体（value也可以用来配置默认值）

checked：默认勾选，checked属性需要type值为radio或者checkbox的时候才生效，作用是给单选框或者多选框默认勾上（前提是同一组内容必须使用相同的name，多组单选框如果选中多个checked只会生效最后一个）

placeholder：占位符，placeholder属性需要type为input时才生效，作用是给文本框添加隐隐的解释文本

disabled ：无法修改的文本框，disabled属性需要type为input时才生效，作用是让文本框不能通过用户界面修改

maxlength：文本框可以输入的最大长度为8个字符，同样需要type是input才生效

label标签: label标签不会向用户直接呈现任何特殊效果。不过，它为鼠标用户改进了可用性，通过鼠标点击label元素区域能让光标聚焦在绑定的输入框中或者单多选框直接勾选

注意点:

表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了

所有表单元素都可以通过label绑定

datalist标签：需要有input输入框存在的情况下以及支持HTML5特性的浏览器才有效，给输入框绑定待选项，起到提醒用户的作用。（和select完全不一样）

格式：

<input type="text" list="输入框id">

<datalist id='输入框id'>

    <option>待选项内容</option>

</datalist>

[图片上传失败...(image-e9263a-1532748685915)]

image.png

textarea标签：表单中定义多行的文本输入控件

格式：

<textarea cols="30" rows="10">默认</textarea>

属性：

cols：表示columns“列”, 规定文本区内的可见宽度

rows：表示rows“行”, 规定文本区内的可见行数

注意点:

可以通过cols和rows来指定输入框的宽度和高度

默认情况下输入框是可以手动拉伸的

禁止手动拉伸可以在css中设置：textarea { resize : none}

select标签：select标签和ul、ol、dl一样，都是组标签. 用于创建表单中的待选列表, 可以从选择某一个带选项，不能输入其他值

格式：

<select>

<optgroup label="北京市">

    <option>海淀区</option>

    <option>昌平区</option>

    <option>朝阳区</option>

</optgroup>

<optgroup label="广州市">

    <option>天河区</option>

    <option>白云区</option>

</optgroup>

<option selected="selected">贵州</option>

</select>

option作用：select标签中嵌套的子标签，用做生成一个选项

option属性：

selected：selected值为selected的时候，则为select选项框设置该option为默认选项

optgroup作用：给select标签中的选项进行分组

optgroup属性：

label：属性为选项组规定描述

[图片上传失败...(image-9e9a60-1532748685914)]

image.jpeg

多媒体标签：

marquee标签：跑马灯效果

格式：

<marquee>内容</marquee>

marquee属性:

direction: 设置滚动方向 left/right/up/down

scrollamount: 设置滚动速度, 值越大就越快

loop: 设置滚动次数, 默认是-1, 也就是无限滚动

behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回

注意点:

marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好

[图片上传失败...(image-59900d-1532748685914)]

image.png

video标签： 播放视频

格式1：

<video src="">

</video>

格式2：

<video>

    <source src="" type="video/mp4"></source>

    <source src="" type="video/webm"></source>

</video>

属性：

src: 需要播放的视频地址

autoplay: 是否需要自动播放视频

controls: 是否需要显示控制条

poster: 视频没有播放之前显示的占位图片

loop: 循环播放视频. 一般用于做广告视频

preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效

muted:视频静音

width/height: 和img标签中的一模一样，设置宽度高度

source的type属性：声明当前视频文件的格式，video/mp4指mp4格式、video/webm指webm格式

注意点：

1、当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放

2、在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

3、ideo标签的第二种格式存在的意义就是为了解决浏览器适配问题. video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

4、通过localhost的方式打开的视频或者音频文件可能会产生无法拖动进度条的bug

audio标签: 播放音频

格式1：


    <audio src="">

    </audio>

格式2：


    <audio>

        <source src="" type="video/mp4"></source>

        <source src="" type="video/webm"></source>

    </audio>

属性：

HTML语义化：

image

[图片上传失败...(image-1040b2-1532748685913)]

image.png

下面就让我们把HTML5语义化标签过一遍：

<header>

<nav>

<main>

<article>

<section>

<aside>

<footer>

极易混淆的语义化标签

下面这两组元素，虽然样式上极其相似，但是其在语义上各有侧重，弄明白他们的区别，可以帮你摸清HTML5语义化的思路...

<i>

Terms in languages different from the main text should be annotated with lang attributes (or, in XML, lang attributes in the XML namespace).

一段文本中如果有插入语言不同的专业术语，需要在<i>标签中加上<lang>属性作为注解，例子如下：

<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

<i lang="fr">是对je ne sais quoi（习语，表达妙不可言的意思）的注解，表示包含的术语语种为法语；

<em>

注意：

The em element also isn’t intended to convey importance; for that purpose, the strong element is more appropriate.

The em element isn’t a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.

<b>

<strong>

总结：

  1. <em>适用于在一段文本中突出重点，强调位置的不同往往会影响语义，而如果仅仅在语态或者语气上为了突出某个文本，应该使用<i>；

  2. 在使用 <i>时，W3C鼓励开发者最好检查下是否有更合适的标签可替代，例如，上述的<em>，来突出重点，或是<dfn>，用来定义一个术语；

  3. 如果为了突出文本的重要性，紧急性，严重性应该使用<strong>；

  4. W3C明确说明，<b> 元素应当是在其他标签都不合适的情况下最后一个考虑使用的标签，言外之意，官方并不推荐使用b标签，

<figure>

<img>

<table>

table元素现在有一系列语义化结构标签

<caption>: 表格的标题，跳脱于表格之外;

<thead>：表格的表头行，定义表格的表头内容;

<tbody>：表格的主体部分，表格的主体部分;

<tfoot>：表格的脚注部分，tfoot要和thead，tbody结合起来使用;

<form>

1. label的for属性与控件的id相对应，比如：

<label for="username">请输入用户名: </label>

<input type="text" id="username" name="username">

2. label中内嵌控件，比如:

<label>请输入用户名<input type="text" id="username" name="username"></label>

此外，

  1. placeholder属性，其值会在输入字段为空时显示，并会在字段获得焦点时消失；

  2. 表单中的单选radio控件和复选checkbox控件以及下拉框select控件，可以为radio, checkbox添加checked属性以及为option添加selected属性让其默认选中

上一篇 下一篇

猜你喜欢

热点阅读