HTML5(3)__H5基本语法(上)
来源：互联网 发布：西斯托 fm数据 编辑：程序博客网 时间：2024/06/08 04:17
1 HTML基本骨架
<!DOCTYPE html> 声明文档类型<html lang="en"> 根标签<head> 头标签 <meta charset="UTF-8"> <title>Title</title> 标题标签</head><body> 主体标签</body></html>
2 Doctype文档声明头
任何一个标准的HTML页面，第一行一定是一个以
1 <!DOCTYPE ……
开头的语句。
这一行，就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范
1 <!DOCTYPE ……
开头的语句。
这一行，就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范
3 meta标签
<meta>标签通常用于指定网页的描述，关键词，文件的信息，作者等其他数据
1 <meta charset=UTF-8">
字符集用meta标签定义，meta表示“元”。“元”配置，就是表示基本的配置项目。
charset就是charactor set“字符集”的意思。这个meta不用背，谁背谁傻，用sublime生成就行。
中文能够使用的字符集三种：（utf-8，gb2312,gbk）
第一种：UTF-8
1 <meta charset=UTF-8">
第二种：gb2312
1 <meta charset=gb2312">
也可以写成gbk
1 <meta charset=UTF-8">
字符集用meta标签定义，meta表示“元”。“元”配置，就是表示基本的配置项目。
charset就是charactor set“字符集”的意思。这个meta不用背，谁背谁傻，用sublime生成就行。
中文能够使用的字符集三种：（utf-8，gb2312,gbk）
第一种：UTF-8
1 <meta charset=UTF-8">
第二种：gb2312
1 <meta charset=gb2312">
也可以写成gbk
有两个字库UTF-8和gb2312。
UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。字库规模： UTF-8（字全） > gb2312（只有汉字）
我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！（重点）
总结：
UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
4 title标签
<title>Title</title> 标题标签
网页的head标签里面，表示的是页面的配置，有什么配置？字符集、关键词、页面描述、页面标题。今后我们还能看见一些配置：IE适配、视口、iPhone小图标等等……
5 注释：
<!--注释的文字-->6 标题标签
<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6>
7 段落标签
<p>段落标签</p><p>段落标签</p><p>段落标签</p>
8 水平线标记
在页面中插入一条水平线的标记是<hr>，这个标签是单标签，单标签不需要闭合标签
9 换行标签：shift+enter
br标签是可以强制段落进行换行，不受空格影响
br标签也是一个单标签
<br/>元素是一个空的HTML元素，由于关闭标签没有任何意义，因此它没有结束标签
br标签也是一个单标签
<br/>元素是一个空的HTML元素，由于关闭标签没有任何意义，因此它没有结束标签
10 输出空格显示效果
我们无法确定HTML被显示的确切效果，屏幕的大小，以及对窗口的调整都可能导致不同的效果，对于HTML，您无法通过在HTML代码中添加额外的空格或者换行来改变输出的效果
当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格和空行都会被算作一个空格。
在HTML标签中的文本，如果有大量空格、换行、缩进，都只会被渲染成为一个空格。这个现象叫空白折叠现象。
当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格和空行都会被算作一个空格。
在HTML标签中的文本，如果有大量空格、换行、缩进，都只会被渲染成为一个空格。这个现象叫空白折叠现象。
11 图片标签的使用
在网页中需要添加一些图片，那么就要使用到img这个标签,要在页面中显示图片，那么需要使用到src属性（源属性）：源属性的值是图像的URL
语法：<img src = “图片地址”, alt = “如果图片没找到显示的文字”, title = “图片文字”>
语法：<img src = “图片地址”, alt = “如果图片没找到显示的文字”, title = “图片文字”>
<imgsrc="http://img4.imgtn.bdimg.com/it/u=2907166542,1036904956&fm=21&gp=0.jpg"> 此处为引用网络地址的图片
<img src="img.jpg"> 本地图片的添加
设置图像的高度与宽度
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
Alt属性：当图片不能正常显示的时候的替代文字
Alt属性：当图片不能正常显示的时候的替代文字
12：超链接标签
超链接的定义:HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面.
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
•一个未访问过的链接显示为蓝色字体并带有下划线。
• 访问过的链接显示为紫色并带有下划线。
• 点击链接时，链接显示为红色并带有下划线。
• 访问过的链接显示为紫色并带有下划线。
• 点击链接时，链接显示为红色并带有下划线。
(1)超级链接标签：a
<a href="http://www.baidu.com">百度</a>
href 是指跳转的地址
(2)如果要在新的页面打开链接需要设置target
<a href = “http://www.baidu.com” target = “_blank”> 超级链接内容 </a>
(3)将图片作为超链接
<p>创建图片链接: <a href="http://www.baidu.org"><img src="img/sc6.jpg" width="100px" height="100px"></a></p>
(4)创建邮件超链接
<p>
这是另一个电子邮件链接：
<a href="mailto:guagua@example.com?cc=guagua@example.com&subject=play game&body=今天晚上我们去开黑!" >发送邮件!</a>
</p>
这是另一个电子邮件链接：
<a href="mailto:guagua@example.com?cc=guagua@example.com&subject=play game&body=今天晚上我们去开黑!" >发送邮件!</a>
</p>
(5)创建锚点链接
创建锚点链接
通过锚点链接，用户可以快速定位到目标内容
创建锚点链接分为两步
1. 使用相应的id名标注跳转的位置
2. 使用<a href = “#id名”> 链接文本 </a> 创建链接文本
通过锚点链接，用户可以快速定位到目标内容
创建锚点链接分为两步
1. 使用相应的id名标注跳转的位置
2. 使用<a href = “#id名”> 链接文本 </a> 创建链接文本
<p><a href="#C4">查看 Chapter 4。</a></p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
13：列表标签
1.1无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul> 标签，每一项用<li>标签
<h4>无序列表:</h4>
<ul>
<li>Android</li>
<li>H5</li>
<li>嵌入式</li>
</ul>
1.2 无序列表的不同显示方式：通过在标签中设置style属性 style = "list-style-type:类型名"
<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</lio>
</ul>
<h4>正方形列表：</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
1.3 同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
1.4 有序列表的不同的编号显示：在 标签中添加 type属性，选择相应的显示模式
<h4>编号列表：</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>大写字母列表：</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>罗马数字列表：</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写罗马数字列表：</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
1.5 标签嵌套
<h4>嵌套列表：</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
可以嵌套多层：
<h4>嵌套列表：</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
1.6 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
dl是英语define list定义列表的意思，用于定义一些词。
dt是英语define title 定义标题
dd是英语define description 定义描述的意思
<h4>一个自定义列表：</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
中国主要城市
<dl>
<dt>北京</dt>
<dd>帝都。政治中心！</dd>
<dt>上海</dt>
<dd>魔都。经济中心！</dd>
<dt>广州</dt>
<dd>花都。南大门！</dd>
<dl>
dt、dd必须交替出现，合法格式：
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dl>
2.7 dt、dd都是容器级标签，里面和div、li一样，都能放置任何东西。
<dl>
<dt>北京</dt>
<dd>
<p>帝都。政治中心！</p>
<p>北京有很多名胜古迹，比如</p>
<ul>
<li>颐和园</li>
<li>圆明园</li>
<li>传智播客总部</li>
</ul>
</dd>
<dt>上海</dt>
<dd>魔都。经济中心！</dd>
<dt>广州</dt>
<dd>花都。南大门！</dd>
<dl>
列表的一些具体用途:
阅读全文
0 0
- HTML5(3)__H5基本语法(上)
- HTML5(4)__H5基本语法(下)
- HTML5(5)__H5新增标签
- html5 基本语法详解
- HTML5 基本语法
- HTML5 canvas 基本语法
- Html5的基本语法
- 4、HTML5基本语法
- html5 websql 基本语法汇总
- html5基本语法（一）
- html5基本语法（二）
- 2 基本语法上
- 【HTML5 localStorage本地储存】简介&基本语法
- JSP基本语法（上）
- C++基本语法（上）
- HTML5上的LocalStorage基本用法
- C++重读一：C++基本语法(上)
- C++重读一：C++基本语法(上)
- mysql死锁的简单解决
- PAT 1019数字黑洞
- 欢迎使用CSDN-markdown编辑器
- linux内核中request_region()函数详解
- java服务端获得客户端IP和MAC
- HTML5(3)__H5基本语法(上)
- 合并n个已排序的链表
- Golang 解决"no buildable Go source file in"问题
- VS编译时output/Errorlist窗口自动弹出设置
- 抓取豆瓣某本书的评论
- 流程控制语句
- Java中 printf、print、println的区别
- java多线程详解
- Android VR入门文章
