html简介

最新推荐文章于 2021-01-18 09:49:01 发布

Mr_Slower

最新推荐文章于 2021-01-18 09:49:01 发布

阅读量340

点赞数

分类专栏： web 文章标签： html

本文链接：https://blog.csdn.net/Mr_Slower/article/details/84235793

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.定义

HTML:hyper text markup language即超文本标记语言;超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准 ,它通过标记符号来标记要显示的网页中的各个部分.

2.结构

超文本即指页面内包含图片, 音乐, 链接等非文字元素.
html文档为树形结构, 它包括一个根标签< html>, 下面有head标签部分和body标签部分,head头部分主要包含网页的相关信息, body主体部分包含网页显示具体的内容;

3.网页显示原理

网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

4.标签:

(1)标签由一对尖角号中间包含一个单词或字母组成,单词不区分大小写, 一般用小写,不能以数字开头;
(2)标签分自闭合标签和非自闭合标签, 非自闭合标签成对出现,例如< a >为开始标签, < /a>为结束标签, 中间的内容为标签体, 开始标签, 结束标签和标签体构成一个html元素;
(3)自闭合标签只写一个开始标签即可, 在开始标签内部关闭标签,如< br/>.
(4)标签可以嵌套, 但不可以交叉嵌套;

5.标签的属性:
(1)标签具有属性,通常以键值对的形式出现在开始标签中, 不同属性之间以空格间隔, 没有顺序之分, 属性用于对标签的功能做出限定或说明;
(2)标签属性值必须加引号,属性建议用小写;
(3)如果标签的属性键与属性值如果完全相同, 则可简写为一个, 例如readonly="readonly"可写为readonly.

6.标签介绍:

6.1 < !DOCTYPE html>

该标签出现在html文档的开始的位置, 用于说明浏览器渲染网页的标准形式, 为W3C标准的CSS1Compat模式, 如不写默认为怪异模式BackCompat,不同浏览器渲染方式不同;

6.2 < html>

该标签是整个html文档的根标签, 用于说明该文档为html文档
< html lang=“en”> 表示该网页为英文, 写不写都可, 写了谷歌浏览器会询问是否翻译; 也可写lang=“zh-cn”

6.3< head>

该标签为头部标签, 用于存放关于网页的一些信息, 一般不会在网页内容上显示;该标签下存放< meta> ,< title>, < link>, < script>等标签;

6.3.1 < meta>
自闭合标签; 具有4个属性:
(1)name=“keywords” content=“IT培训, 教育, 计算机培训”
用于表明搜索引擎查找是的关键字;
name=“description: content=“说明文字”
用于表明该网页的介绍信息;
(2)http-equiv=“Refresh” content=“2;URL=https://www.baidu.com”
表示2秒后自动跳转到指定链接,如不指定则刷新本页面;
http-equiv=“content-Type” charset=“utf-8” 指定文档的编码格式, 可简写为charset=” utf-8";
http-equiv=“X-UA-Compatible” congtent=“IE=EmulateIE7”
表示兼容IE7;
(3)charset属性见上述;
(4)content属性见上述;

<head>
    <meta name="keywords" content="fuck,shit"/>
    <meta name="description" content="this is happy"/>
    <meta http-equiv="Refresh" content="2;https://www.baidu.com"/>
    <meta http-equiv="Content-Type" charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
</head>

6.3.2 < title>
该标签指定网页名, 搜索引擎显示名, 收藏夹里的名

6.3.3 < link>
自闭合标签; 定义文档与外部资源的关系;
先介绍2个属性:

(1)rel: 必须属性,可以有多个值,如rel=“icon” href=“http://www.jd.com/favicon.ico” 定义了页面图标;
rel=“stylesheet” href=“css.css” 定义要导入的样式表;
(2)href属性指明了被链接文档的位置;

其他属性待补充

6.3.4 < script>
定义了客户端的脚本文件, 后续待补充

6.4 < body>

此标签中存放网页的具体内容;包含以下几种标签:

6.4.1 < hn>
块级标签;
标题标签,标签中内容加黑加粗,分为1-6级, 字号逐渐减小,用于定义标题, 注意: 如果不是标题, 单纯想加黑加粗字体,最好不要使用这种方式;

6.4.2 < p>
块级标签;
段落标签,会自动生成行距;

6.4.3 < br>和< hr>
自闭合标签,块级标签;
br为换行标签, hr为水平线标签, 关闭时在标签最后加/ 如< br/>

6.4.4 < b> 和< strong>
内联标签;
加粗字体, < b>为旧标准仅为加粗, strong为强调的意思,表现形式上两种没有区别;

6.4.5 < strike>
内联标签, 文件加横线;

6.4.6 < em>
内联标签;
变为斜体;

6.4.7 < sup> 和< sub>
内联标签
分别为上角标和下角标;

6.4.8 < div> 和 < span>
div是块级标签, span为内联标签
< div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
< div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
< div> 元素经常与 CSS 一起使用，用来布局网页。
< span> 用于对文档中的行内元素进行组合。
< span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 < span> 应用样式，那么 < span> 元素中的文本与其他文本不会任何视觉上的差异。
< span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

6.4.9上述几种标签的例子

<body>
    <h1>happy tree friends团结一家亲</h1>
    <p>哈哈哈</p>
    <p>嗯嗯嗯</p>
    <strong>对对对</strong>
    <strike>错错错</strike><br/>
    <em>杀杀杀</em>
    <hr/>
    256<sub>3</sub> H<sub>2</sub>O
    <div><strong>嵌套标签</strong></div>
    <span><p>嵌套标签2</p></span>  <!--不可嵌套-->
</body>

运行结果

6.4.10 < img>
内联标签;自闭合标签
该标签向文档中插入图片,有五个属性;
(1)src="123.png "指明图片的路径;
(2)alt=“加载失败” 指明图片加载失败时的提示;
(3)title=“图片1” 指明鼠标悬浮提示信息;
(4)width=“10px” 指明图片宽度;
(5)height=“20px” 指明图片高度;(宽和高只指明一个剩下的会等比例缩放

<img src="a.jpg" title="女神" alt="加载失败!!" width="300px">
<img src="1.gif" title="sabi" alt="加载失败!!" width="300px">

6.4.11 < a>
内联标签;
该标签为超链接标签, 用于向文档中插入超链接;
具有7个属性, 先只介绍两个:
(1)href=“URL” 指定超链接的地址;
(2)target="_blank" 指定打开超链接在新窗口中;

<a href="https://www.baidu.com" target="_blank">福利网站</a>

(3)跳转到某个标签:
< a href="#aaa">返回顶部< /a>

6.4.12 < ul> < ol>和< dl>
块级标签;
(1)ul, ol
ul为无序列表标签, ol为有序列表, 与< li>标签一起使用,以列举的形式展示条目;
ol有一个属性reversed=“reversed” 倒序显示列表;
(2)dl
dl为自定义列表,与< dd> < dt>标签一起使用, 用于自定义列表形式;

<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>

    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>

    <dl>
        <dt>aaa</dt>
        <dd>bbb</dd>
        <dd>ccc</dd>
    </dl>

在这里插入图片描述

6.4.13 < table>
块级标签;
用来在网页中定义一个表格, html5只有一个属性:
border=“1” 或"" 规定表格是否有边线;
老属性:
cellpadding=‘10px’ 内边距
cellspacing=‘20px’ 外边距
rowspan=‘2’ 元素占据行数
colspan=‘2’ 元素占据列数

表格内的标签:
(1)< thead>表示表格头部;(简单表格可以不写)
(2)< tbody> 表示表格体;(简单表格可以不写)
(3)< tr> 定义一个表格行,该标签内含两种标签:< th>表头字体格式; < td> 表中的字体格式;

<table border="1" cellpadding="10">
        <tr>
            <th>111</th>
            <th>222</th>
            <th>333</th>
        </tr>
        <tr>
            <td rowspan="2">aaa</td>
            <td>bbb</td>
            <td>ccc</td>
        </tr>
        <tr>
            <!--<td rowspan="2">你你你</td>-->
            <td>我我我</td>
            <td>她她她</td>
        </tr>
    </table>

6.4.14 < form>
(1)form标签的属性:
1)id属性:id=‘abc’ 每个标签都有一个ID, 但不能重复;
2)action=‘url’ 表示提交表单时向何处发送数据;
3)method=‘post’ 或’get’ 规定用于发送表单数据的http方法, 默认为get:通过url以键值对的形式发送, 缺点是不安全且长度受限; post通过network中的form data发送;
4)enctype属性表示向服务器发送表单数据前如何进行编码(multipart/form-data, application/x-www-form-urlencoded, text/plain), 仅适用于method=post的情况;

其他待补充…

form标签下面包含几种标签:
(2)< input>
自闭合标签, 内联标签;
该标签下有如下几种属性:
1)type=‘text’ 加载一个单行输入框, 可以输入文本, 默认宽度20字符; 如果定义value值则为输入值的默认值;

type=‘password’ 加载一个输入框, 输入就密文文本;

type=‘checkbox’ 定义一个可以勾选的框, 可以多选;

type= ‘radio’ 定义一个圆形的选择框,可以多选, 如果多个标签的name属性相同, 则只能选择一个

type=‘submit’ 定义一个提交按钮, 把表单的内容提交到server; 在此情况下定义value属性的值为按钮的名称;

type=‘button’ 定义一个按钮,常与JavaScript一起配合使用;此情况下定义value属性的值为按钮名称;

type=‘reset’ 定义一个重置按钮, 所填表单重置为默认值, value属性为按钮名称;

type=‘file’ 定义一个提交文件的按钮;允许用户上传文件;上传文件时, form标签的属性method必须为post; enctype属性必须为multipart/form-data;

2)name=‘username’ 可以定义输入内容的键;

3)value=’ music’ 可以定义输入或选择内容的值;

4)readonly=“readonly” 定义该标签为只读;

5)checked=“checked” 定义该标签选项默认为选中状态; (只针对 type=“checkbox” 或者 type=“radio”)

6)disabled=“disabled” 定义该标签为禁用;

7)placeholder=‘abc’ 定义该标签输入的提示信息;
注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

8)required= “required” 定义在表单提交前必须填写输入;

<form action="http://127.0.0.1:9000" method="post">
        <p>用户名:<input type="text" required></p>
        <p>密码<input type="password" placeholder="输入密码" > </p>
        <input type="checkbox" readonly>唱歌 <input type="checkbox" >跳舞
        <input type="radio" name="gender" value="male" checked>男 <input type="radio" name="gender" value="female">女
        <p><input type="reset" value="重置吧亲"></p>
        <p><input type="button" value="我不是提交"></p>
        <p><input type="submit" value="提交吗亲"></p>
        <p><input type="file" name="uploadfile" ></p>
    </form>

6.4.15 < select>
内联标签;
该标签定义了下拉列表的选择形式,有如下几个属性
(1)name=" “定义了用户选择的键;
(2)size=“2"定义了可视选项的个数;
(3)multiple:定义了可以是多选;
该标签下包含< option>标签, 有如下属性:
(1)value:=”” 定义了用户选择的值;
(2)selected:定义该选项默认选中;
该标签下的< optgroup>标签可用于分组, 但无法选择;

 城市
    <select name="city"  size="1">
        <optgroup label="啊啊啊啊">
        <option value="shit">北京市</option>
        <option value="fuck" selected>南京市</option>
        <option value="oh">东京市</option>
        <option value="hhhh">西京市</option>
        </optgroup>
    </select>

6.4.16 < textarea>
内联标签;
该标签定义了一个可输入多行的文本域;
属性:
(1)name=" "用户输入的键
(2)rows=“2”, cols="3"定义文本区域内可见的行和列
(3)此外还有required, placeholder, readonly, disabled, maxlengh等;

注意: 文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

<textarea name="aaa" rows="10" cols="50"></textarea>

6.4.17 < lable>
内联标签;
为input元素添加效果:当用户点击该标签的文本时，浏览器就会自动将焦点转到和标签相关的表单控件上,属于form元素中内容;
for=" element ID"定义label要绑定的元素;

<label for="123">密码</label>
<p><input id="123" type="password" placeholder="输入密码" > </p>

6.4.18 < fieldset>
为form表单元素周围绘制边框;
属性有name, disabled, form
里面可以包含legend标签,来定义fieldset元素的标题;

<fieldset>
        <legend>呵呵</legend>
        <p><input type="submit" value="提交吗亲"></p>
        <p><input type="file" name="uploadfile" ></p>
</fieldset>

Mr_Slower

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html简介

1.定义HTML:hyper text markup language即超文本标记语言;超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准 ,它通过标记符号来标记要显示的网页中的各个部分.2.结构超文本即指页面内包含图片, 音乐, 链接等非文字元素.html文档为树形结构, 它包括一个根标签&lt; html&gt;, 下面有head标签部分和body标签部分,head...
复制链接

扫一扫

专栏目录