HTML基础（3）

2019-04-15 本文已影响0人饥人谷1904_陈俊锋

饥人谷学习第3天

HTML

超文本标记语言，是一个可以用来结构化Web内容并给予其含义和目标的编码语言。

概览

DOCTYPE
文档声明
<! DOCTYPE html>
1.DOCTYPE之前，只能由注释和空白
2.大小写不敏感
标签
自闭合标签/空元素
能闭合标签
属性
全局属性
注释
空格空白
1.使用HTML实体，如：&nbsp
2.使用 pre标签包起来（显示的就是原来的内容）
3.在父元素使用CSS while-space:pre
实体
1.有名字的HTML实体，用 &名字; 表示
2.没有名字的HTML实体，用 &#十进制; 或 &#x十六进制; 表示

Emmet语法

后代：>
nav>ul>li

<nav>
   <ul>
      <li></li>
   </ul>
</nav>

兄弟：+
div+p

<div></div>
<p></p>

上级：^
div+div>p>span+em^bq

<div></div>
<div>
   <p><span></span><em></em></p>
   <blockquote></blockquote>
</div>

div+div>p>span+em^^bq

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

分组：()
div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

乘法：*
ul>li*3

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

自增符号： $ul>li.item$ 3 ($@35 可以从3~5)

<ul>
   <li class="item1"></li>
   <li class="item2"></li>
   <li class="item3"></li>
</ul>

ul>li.item$@-*3

<ul>
   <li class="item3"></li>
   <li class="item2"></li>
   <li class="item1"></li>
</ul>

ID和类属性
1.#header
<div id="header"></div>
2..title
<div class="title"></div>
3.form#serch.wide
<form id="search" class="wide"></form>
4.p.class1.class2.class3
<p class="class1 class2 class3"></p>
自定义属性
p[title="hello world"]
<p title="hello world"></p>
文本：{}
a{Click me}
<a href="">Click me</a>

标签(描述文本)

标题和段落
标题：h1~h6
段落：p
列表
无序列表：ul > li(ul里面的子元素只能有li)
有序列表：ol > li
自定义列表：dl dt dd
强调
语气重：em
直白加粗：strong
加个标记：span (比strong语义弱很多)

HTML须知

设定文档语言

<html lang="zh-CN">

SEO(搜索引擎优化)
有助于视觉障碍人士通过读屏器阅读页面
可以设定部分页面内容的语言
<p>日语<span lang="jp"> @#$... </span> 的意思是什么？</p>

块级元素和内联元素

块级元素在页面中以块的形式展现 - 块级元素不会被嵌套进内联元素中，但可以嵌套在其他块级元素中，如<div> <h1> <p>。
内联元素通常出现在块级元素中并被其他文本所包围 - 内联元素不会导致文本换行，如：<a> <em> <strong>

属性

布尔属性
比如<input>被添加disabled属性（不需要赋值）后，就接受不到用户的输入了。
全局属性
id，class，style，title都是全局属性，可以被任何HTML元素使用；
hidden 可用于隐藏某个页面元素；
contenteditable可以使元素内容变成可编辑。

特殊字符

< --> <
> --> >
" --> "
' --> '
& --> &

注释

< ! -- 要注释的内容 -- > （中间间距加大是为了看到此行代码）
快捷键 ctrl+/

HTML头部

<head>的内容不会在浏览器显示，它的作用是包含一些页面的元数据
元数据(Metadata):描述数据的数据(a set of data that describes and gives information about other data)

乱码：当编辑器里的文件保存后，用浏览器去解析，如果浏览器解析的编码方式和编辑器解析的方式不一样，就会出现乱码

元数据

1.指定文档编码
meta charset="utf-8"
2.适配移动页面
<meta name="viewport" content="width=device-width,initial-scale=1.0">
3.定制页面图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
4.设置referer
<meta name="referer" content="never">
5.添加页面描述
<meta name="description" content="描述">

应用CSS和JS

<link rel="stylesheet" href="app.css">
<script src="app.js"></script>

创建超链接

简单链接
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
title属性
<a href="http://www.baidu.com" title="百度搜索引擎">百度</a>
<a href="http://www.baidu.com" title="百度搜索引擎">百度</a>
外部链接
将target设置成_blank时，点击链接浏览器会新开一个Tab打开该网页
返回顶部链接
<a href="#">返回页面顶部</a>
文档内部链接
用于定位到文档的某一部分，<a>的href要对应文档内某个元素的id（值在文档内要唯一）
图片链接
用a标签包裹图片，点击图片跳转
下载链接
<a href="#" download>下载...
电话链接
<a href="tel:7883249">7883249</a>
Email链接
<a href="mailto:chenjunf@163.com">发邮件给chenjunf</a>

文件路径

相对路径

同一站点尽量使用相对路径

绝对路径

全路径

标签详细

1.<p>段落标签</p> 当作段落处理，段落之间有空隙

2.&nbsp ：空格标签
>大于号： (>) <小于号： (<) &与号： (&)

3.<h#>标题标签</h#> : #为1~6

4.<！--要注释的内容-->：注释符

5.图片标签<img src = " 图片路径 "/> 可以给各个属性赋值

src：图片的路径
height：图片的高度 px
width：图片的宽度 px
alt：当图片由于某些原因显示失败时所显示的文本
title：当光标移动到图片上的时候显示的文本

可以用<figure></figure>描述一段带图片的区域

6.<hr/> 水平线

7.<br/> 拆行换行行与行之间没有空隙

8.字体标签 <font></font>
属性 size = 1~7最大 color = 颜色 face：字体系列

9.编辑文本

<b>定义粗体文本
<i> 定义斜体
<tt> 定义打印机文本（等宽）
<u> 定义下划线文本
<sup> 、<sub> 定义上下标
<s> 定义加删除线文本

10.marquee标签用来显示元素的移动

direction 属性，设置方向 up down left right
behavior 属性，设置模式 scroll altermate slide

11.a标签超链接

属性 href 表示要连接的地址
Target 打开新网页的方式 _blank 表示打开一个新网站进行跳转 _self 表示在当前页面进行跳转
实现当前页面跳转和实现页面间的跳转

12.body当中的属性

text属性
文本颜色
link属性
超链接的颜色
alink属性
点击超链接时的颜色
vlink属性
点击之后超链接的颜色
bgcolor属性
设置整个背景的颜色
background属性
背景图片，平铺

13.列表

无序列表unorder（圆点） <ul>
有序列表order（数字） <ol>
自定义列表 <dt>

14.表格<table>
属性cellspacing 设置单元格之间的距离 cellpadding 设置单元格与文字的距离

<thead> 表头
<th> head里面的单元格(列)
<tbody> 表内容
<tr> 行
<td> body行里面的单元格(列)

1.跨列的单元格 colspan属性
2.跨行的单元格 rowspan属性
3.设置合并边框模型 border-collapse 属性
4.设置相邻单元格的边框间的距离
border-spacing 属性（仅用于“边框分离”模式）

15.div+span

16.框架标签

<frameset>
         <frame />
</frameset>

17.视频音频
<video>
支持多种格式

WebM - Chrome HE Firefox
MP4 - IE he Safari
Ogg

<audio>

HTML基础（3）

HTML

概览

Emmet语法

标签(描述文本)

HTML须知

设定文档语言

块级元素和内联元素

属性

特殊字符

注释

HTML头部

HTML头部

元数据

应用CSS和JS

创建超链接

文件路径

相对路径

绝对路径

标签详细

猜你喜欢

热点阅读