html基础-架构、文本、段落、列表标签

Html介绍

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

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

超文本:在文本内容的基础上,添加更加的丰富的信息(图片,动画,声音等)

标记(标签)---<单词>

挨着<是标记

标记通常有两次含义:

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

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

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

Html的标签分类

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

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

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

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

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

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

例如<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如果有标签嵌套,顺序嵌套,不能交叉

单标签一定要闭合(/)例如<br />

属性:每一个标签有没有属性,有多少---w3c规定好的

属性值:双引号引起

Html注释

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

<!—注释内容-->


<hr/>水平线标签

<br/>换行标签

Html文本标签

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

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

属性

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

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

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

 html基础-架构、文本、段落、列表标签

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

 html基础-架构、文本、段落、列表标签

<b></b>加粗

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

<i></i>倾斜

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

<u></u>下划线

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

<sup></sup>上标

<sub></sub>下标

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

 :空格,单词分隔符

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

 html基础-架构、文本、段落、列表标签

注意:一定要顺序嵌套,不能交叉

Html段落的标签

<p></p>一段                                 

<h1></h1>标题1                                                                            

<h2></h2>标题2

....

<h6></h6>标题6

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

标题的属性

Align  取值 left  center   right


Pre标记:预定义标签,保留原有的空格和换行

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

 html基础-架构、文本、段落、列表标签

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

块标签:输入完标签之后,自己独占一行

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

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

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

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

列表

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

无序列表

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

语法:

<ul>

<li>搜狗</li>

<li>输入法</li>

<li>浏览器</li>

</ul>

·搜狗

·输入法

·浏览器

 html基础-架构、文本、段落、列表标签

ul的属性

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

有序列表

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

语法:

<ol>

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

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

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

</ol>

1 谁在鼓吹2017年房价下跌?

2赵海均:明星并购价值有几何

3股市暴跌,到底发生了什么?

 

 html基础-架构、文本、段落、列表标签

 

ol的属性

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

reversed="reversed"倒叙

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

自定义列表

<dl>

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

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

</dl>

特殊字符

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

&copy;版权@

&lt; <

&gt; >

&yen; ¥

html基础-架构、文本、段落、列表标签



如有不足请多多指教!希望能给您带来帮助!