html基础01-架构、文本、段落、标题、列表标签、<meta>、特殊字符-原创手记-慕课网

Html介绍

Html(hyper text markup language)超文本标记语言

Html是一种标准-----w3c

超文本：在文本内容的基础上，添加更加的丰富的信息（图片，动画，声音等）

标记（标签）---<语义化单词>

标记通常有两次含义：

表型：每一个标签都有一定表现形式

表意：每一个标签有一定的意义

语言：可以直接被浏览器解析，和程序语言不一样

Html的标签分类

l 双标签：开始标签和结束标签构成，内容放入开始标签和结束标签之间

语法：<标签属性名=”属性值”>……内容…..</标签>

属性理解人的特征性别=”女”体重=”45”身高=”165”

例如<div></div><a></a><html></html>

l 单标签：只有开始标签，没有结束标签，没有内容,在单标签的后面一定要闭合

语法：<标签属性名=”属性值”属性名=”属性值” />

例如<link /><img /><br /><meta />

Html基本骨架结构

<html>

<head>

<title>网站的标题</title>

</head>

<body>

主体……

</body>

</html>

html文件的扩展名是 XXX.html-----保存XXX.html

html结构说明：

l <html>含义：告诉浏览器，网页的代码用什么格式来解析

l <head>含义：告诉浏览器网页的汉字用什么字符集，使用的字符集不正确，就会出现乱码 gb2312 简体中文----（汉字操作系统默认使用的）gbk国标码utf-8多国语言

l <title>含义：便于搜索引擎 (给页面起个名称)

l <body>含义：网站的内容，99%的内容都放入body标签中，只有放入该标签，才能在窗口显示（网页内容放入body中）

注意：tab键可以缩进

Html的书写规范

l Html不区分大小写，但是w3c使用的是小写<body>不推荐<BODY>

l Html如果有标签嵌套，顺序嵌套，不能交叉

l 单标签一定要闭合（/）例如<br />

l 属性：每一个标签有没有属性，有多少---w3c规定好的

l 属性值：双引号引起

Html注释

注释的内容不在窗口中显示

单行注释：ctrl+'/'

多行注释：ctrl+shift+'/'

Html文本标签

1. Font 设置文本的颜色文本的字体文本的大小

<font>设置的内容</font>

属性

Color 设置文本的颜色例如color=”red” color=”#ff0000”

Size 设置文本的大小例如 size=”5”是以号为单位

Face 设置文本的字体例如 face=”隶书”

需求：输入一段文本设置该段的前五个字，文本颜色为蓝色blue #0000ff,文本的大小为6号，字体为楷体

<hr/>水平线标签

<br/>换行标签

<del></del>中划线的标签

<b></b>加粗

<strong></strong>加粗加强语气

<i></i>倾斜

<em></em>倾斜加强语气

<u></u>下划线

<ins></ins>文本下划线

<sup></sup>上标

<sub></sub>下标

需求：输入一段文本，要求前六个字文本颜色为蓝色，加粗，倾斜，加下划线

注意：一定要顺序嵌套，不能交叉

Html段落和标题的标签

<p></p>一段

<h1></h1>标题1

<h2></h2>标题2

....

<h6></h6>标题6

h1----h6字体逐渐变小

标题的属性

Align 取值 left center right

<pre>：预定义标签，保留原有的空格和换行

Div ：是网站上使用的标签最多之一，本身没有任何意义，自己独自一行，结合css样式一起使用，构成相应的效果块标签

Span 本身没有任何的含义，但是也是网站使用最多标签之一，结合css一起使用构成功能，行内标签

块标签：输入完标签之后，自己独占一行

那些属于块标签<h1></h1>…<h6></h6><p></p><div></div>

行内标签：输入完标签之后，不是自己独占一行

那些属于行内标签<em><span><i><u>

注意：下面的写法不推荐使用，通常块标签里面包括行内标签

列表

就是若干个相似的内容进行排列

无序列表

就是若干个相似的内容进行排列，没有先后顺序

ul的属性:

type 类型设置列表前面符号的样式取值 circle（空圈） disc默认 square（实方）

语法：

<ul>

</ul>

有序列表

若干个相似的内容进行排列有先后顺序

ol的属性:

type 类型设置列表前面符号的样式取值数字大小写字母

reversed="reversed"倒叙

start="4"从固定的数值开始排

语法：

<ol>

<li>谁在鼓吹2017年房价下跌？</li>

<li>赵海均:明星并购价值有几何</li>

<li>股市暴跌，到底发生了什么?</li>

</ol>

自定义列表

<dl>

<dt>自定义列表标题</dt>

<dd>对该标题进行描述</dd>

</dl>

Meta标签

描述网页文档属性

http-equiv 和name

http-equiv :模拟的是http文件头信息，当内容从服务器端发送客户端，告诉浏览器如何正确显示信息

字符集

网页自动刷新

Name可以设置网页关键字，描述信息等

便于搜索引擎的需要

特殊转义字符（常用）

&nbsp；一个空格，代表一个字符，一个汉字占三个字符

&ensp；半方大的空白

&emsp；全方大的空白

&times；乘号、错误

&copy；版权@

&lt； <

&gt； >

&yen； ¥

«左双箭头<<

»右双箭头>>

若有不足请多多指教！希望给您带来帮助！