第一讲 HTML的标签

前言

web:web(world wide web)即全局广域网，也称为万维网，他是一种基于超文本和HTTP协议组成的全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在查找和浏览信息提供了图形化、易于访问的直观界面，其中的文档以及超级链接将Internet上的信息节点组成了一个互为关联的网状结构。

Web又分为Web前端和Web后端。

前端：就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

后端：更多的是与数据库进行交互以处理相应的业务逻辑。

网站与网页

HTML:(Hyper Text Make-up Language) 超文本标记语言或者超文本链接标识语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令主城的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等也就是说文字、图片、表格、音视频都被看成文本。这些部分都是用HTML标签生成的。

HTML基本组成单元--标签

标签的分类：单标签与双标签。

单标签：某些标签只需要单独使用就能完整的表达意思，控制网页效果。语法：<标签名属性名1=“属性值1”/>

双标签：标签是成对使用，由一个开始标签和一个结束标签组成。语法：<标签名属性名1=“属性值1”>内容</标签名>

一个完整的HTML网页

网页的标题、其它的说明信息及不需要在浏览器中显示的内容放在head这对标签中。

在浏览器中需要显示的内容放在body这对标签中。

另外我们在真正写网页时除了以上的标签之外，我们还需要添加其它的标签，比如文档声明，中文编码声明等，为什么加这些呢？因为我们大家都知道浏览器特别多对吧。浏览器对HTML的代码解析不一样，不加文档声明，不同的浏览器会按自己的标准去解析HTML代码！所以我们在HTML最开始的位置加<!DOCTYPE HTML>这句话,每个浏览器都会按着符合标准的HTML代码去解析，说到标准，我们还要知道HTML是应该遵循谁的标准，HTML要遵循W3C标准，那W3C标准又是什么呢？

W3C标准：万维网联盟创建于1994年。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，（W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括HTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布。

另外加中文编码声明，是为了浏览器解析中文时以简体中文形式显示。

那中文编码有那些呢？有UTF-8（用在网页上可以统一页面显示中文简体繁体及其它语言）、GB2312(信息交换用汉字编码字符集)等。完整的HTM基本结构如下：

<!DOCTYPE html>     按照w3c标准解析网页
<html>
    <head>
        <meta charset="UTF-8">
        <title>这是第一个网页</title>
    </head>
    
    <body>
          需要在浏览器中显示的内容。
    </body>
</html>

HTML常用标签

1. 标题标签（h1----h6）

语法: <h1 align=”center”>内容</h1>

常用属性：

align：设置对齐方式.

属性值有left（左对齐）、center（居中对齐）、right（右对齐）

代码：

<body>
    <h1 align="center">我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
</body>

2、段落标签:

语法：<p></p>

常用属性：

align：设置对齐方式.

属性值有left（左对齐）、center（居中对齐）、right（右对齐）

代码：

<body>
    <h1 align="center">赵薇真实身家曝光：资产总值56亿 不动产占6亿</h1>
    <p>澎湃新闻讯 1月11日，浙江万好万家（18.380，0.00，0.00%）文化股份有限公司（600576）发布公告，回复上证所问询。</p>
    <p>2016年12月29日，万家文化收到上海证券交易所《关于对浙江万好万家文化股份有限公司权益变动信息披露相关事项的问询函》（上证公函[2016]2483号）（以下简称“《问询函》”），问询函要求西藏龙薇文化传媒有限公司（以下简称“龙薇传媒”）就通过股份转让协议，以30.6亿元对价取得公司1.85亿股份、成为公司控股股东事项作进一步说明和披露。</p>
    <p>根据公告显示，龙薇传媒用于本次收购所需资金30亿元万元，全部为自筹资金，其中股东自有资金借款6，000万元，第三方自有资金借款150，000万元，筹资成本为年化利率10%；拟向金融机构股票质押融资149，990万元，目前正在金融机构审批流程中，融资年利率遵守市场化原则，预计6%左右。</p>
</body>

3、三种列表标签

3.1 无序列表

语法:

<ul >

<li>无序列表项</li>

......

</ul>

常用属性：

type：设置符合类型，属性值有circle （空心圆）、 square （黑色方块）、 disc （黑色实心圆）

代码：

<ul>
    <li>吉林省</li>
    <li>黑龙江省</li>
    <li>辽宁省</li>
</ul>

3.2 有序列表

语法:

<ol >

<li>无序列表项</li>

......

</ol>

常用属性：

type：设置编号类型，属性值有"a"、"A"、"i"、"I"、"1"（默认）

start：设置编号起始值，属性值为起始的数值，如从2开始就写2

<ol>
    <li>吉林省</li>
    <li>黑龙江省</li>
    <li>辽宁省</li>
</ol>

3.3 定义列表

语法:

<dl>

</dl>

<dl>
    <dt>吉林省</dt>
        <dd>长春市</dd>
        <dd>吉林市</dd>
    <dt>辽宁省</dt>
        <dd>沈阳市</dd>
        <dd>大连市</dd>
</dl>

4、span标签、strong标签、b标签、i标签、em标签、br标签

语法：

<br/>

说明：span 标签默认浏览器中没有效果，strong\b标签默认是加粗显示，但strong更多是有强调的作用。i\em是倾斜的意见，但em具有强调的作用。br表示换行的意思。

代码：

<p>
    <span>根据</span><strong>公告</strong><b>显示</b>，<i>龙薇传媒</i><em>用于本次</em>收购所需资金30亿元万元，全部为自筹资金，其中股东自<br>有资金借款6，000万元，第三方自有资金借款150，000万元，筹资成本为年化利率10%；拟向金融机构股票质押融资149，990万元，目前正在金融机构审批流程中，融资年利率遵守市场化原则，预计6%左右。</p>
<span>根据</span><strong>公告</strong><b>显示</b>，<i>龙薇传媒</i><em>用于本次</em>

5、 div标签

语法:

说明:

Div的中文含义是区块的意思，里面可嵌套任何一个标签。

<div>
    <h3>赵微资产</h3>
    <p>第三方自有资金借款150，000万元，筹资成本为年化利率10%；拟向金融机构股票质押融资149，990万元</p>
    <ul>
        <li>投资赚来的</li>
        <li>演电影赚的</li>
        <li>演电视剧赚的</li>
    </ul>

6、img标签

语法: <img src=“图片地址” width=“” height=“” title=“” alt=“” border=“”/>

常用属性：

src：指定图像的源文件路径，可以使用相对路径、绝对路径或URL。

width：指定图像的宽度，单位为像素。

border：指定图像边框厚度。

alt：这是用以描述该图像的文字，图像不能显示时将显示该属性值；

Title: 图片的提示信息当鼠标移至图像上时，将该属性值作为提示信息显示。

网页中图片的常用格式:有三种：gif、jpg、png。相应格式的特点如下

a) Gif格式只有256种颜色、支持透明、动画

b) Jpg格式颜色丰富（1670多万种）、文件小

c) Png格式是无损压缩，文件大，支持透明。【半透明】

<img src="img/zhao.jpg" width="400" height="300" title="赵微" alt="zhao.jpg" />

7、 a标签（超链接标签）

语法:

　　 <a href="资源地址“ target =“”>超链接文本及图像</a>

常用属性:

href：指定链接地址。若是链接到网站外部，必须为URL地址；若是链接到网站内部页面，只需指明该页面的绝对路径或相对路径。

target：指定显示链接目标的窗口。可取如下值：

_self：默认值。当前窗口。

_blank：新打开、未命名的窗口。

_top：清除当前窗口并在整个浏览器窗口显示。

_parent：当前窗口的父窗口。

posted on 2021-09-26 17:51 谋生的日记本阅读(113) 评论(0) 收藏举报

刷新页面返回顶部