01:HTML

01:HTML,第1张

概述HTML概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。 浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户! 文档树: Meta(metadata information) 提供有关页面的元信息,例:页面编码、刷新 HTML概述

HTML是英文Hyper Text Mark-uP Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!

文档树:

Meta(Metadata information)

提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1、页面编码(告诉浏览器是什么编码)

< Meta http-equiv=“content-type” content=“text/HTML;charset=utf-8”>@H_301_43@  

2、刷新和跳转

< Meta http-equiv=“Refresh” Content=“30″>< Meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />@H_301_43@  

3、关键词

<Meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部">@H_301_43@  

4、描述

<Meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片,汽车价格大全,最精彩的汽车新闻、行情、评测、导购内容,是提供信息最快最全的中国汽车网站。">@H_301_43@  

5、IE兼容

<Meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">@H_301_43@  Title   
<Title>你网址的头信息</Title>@H_301_43@  link 

CSS

< link rel="stylesheet" type="text/CSS" href="CSS/common.CSS" >@H_301_43@  

icon

< link rel="shortcut icon" href="image/favicon.ico">@H_301_43@  Style 

在页面中写样式

< style type="text/CSS" > .bb{ background-color: red; } < /style>@H_301_43@  Script 

1、引进文件

< script type="text/JavaScript" src="http://www.GoogleTagservices.com/tag/Js/gpt.Js"> </script >@H_301_43@  

2、写Js代码

< script type="text/JavaScript" > ... </script >@H_301_43@  

给个完整的实例:

<!DOCTYPE HTML>
<HTML lang="en"><head> <Meta charset="UTF-8"> <!--<Meta http-equiv="Refresh" Content="3">--> <!--<Meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn"> <Meta name="keywords" content="汽车,俱乐部"/> <Meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片,汽车价格大全,最精彩的汽车新闻、行情、评测、导购内容,是提供信息最快最全的中国汽车网站。"/> <Title>小男孩</Title></head><body></body></HTML>@H_301_43@

 

常用标签

标签一般分为两种:块级标签 和 行内标签

1、a、span、select 等
2、div、h1、p 等
各种符号

例如:版权所有:©等 ;http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.HTML

下面介绍主要的标签:

1、p是段落标签(默认段落之间是有间隔的)、br是换行标签、hr是画个横线、H1~H6是标题;
<!DOCTYPE HTML><HTML lang="en"><head>    <Meta charset="UTF-8">    <Title>Title</Title></head><body><p>asdfasdfasdasdfasdfasdfasdfasdfasdfasdfasdfasd</p><p>asdfasdfasdasdfasdfasdfas<br>dfasdfasdfasdfasdfasd</p><a href="http://www.baIDu.com">百度</a><h1>fuckme</h1><h2>fuckme</h2><h3>fuckme</h3><h4>fuckme</h4><h5>fuckme</h5><h6>fuckme</h6><span>fuckyou</span><span>fuckyou</span><span>fuckyou</span><div ID="d1" style="position: fixed; bottom: 0; right: 0;">看我在什么地方</div></body></HTML>@H_301_43@  

具体展示页面如下:

2、a标签,主要功能是:打开连接(_black表示在新的页面打开)和做锚点
<!DOCTYPE HTML><HTML lang="en"><head>    <Meta charset="UTF-8">    <Meta name="keywords" content="">    <Title>Title</Title></head><body>

  <a href="http://www.baIDu.com" target="_blank">百度</a> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div ID="i1" style="height:600px;">第一章的内容</div> <div ID="i2" style="height:600px;">第二章的内容</div> <div ID="i3" style="height:600px;">第三章的内容</div> <div ID="i4" style="height:600px;">第四章的内容</div><hr></body></HTML>@H_301_43@ 3、input标签、table标签、ul、ol、dl标签:
<!DOCTYPE HTML><HTML lang="en"><head>    <Meta charset="UTF-8">    <Title>input</Title></head><body><form action="" enctype="multipart/form-data">    <input type="text" name="user">    <input type="password" name="pwd">    <hr>    男:<input type="radio" name="gender" value="1">    女:<input type="radio" name="gender" value="2" checked="checked">    <hr>    形意:<input type="checkBox" name="favor" value="1">    八卦:<input type="checkBox" name="favor" value="2">    太极:<input type="checkBox" name="favor" value="3">    <hr>    <input type="file" name="f1">    <hr>    <select name="city" ID="c1">        <option value="1">南京</option>        <option value="2">北京</option>        <option value="3" selected="selected">上海</option>    </select>    <br>    <textarea name="t1" ID="t1" cols="30" rows="10"></textarea>    <input type="submit" value="submit">    <input type="reset" value="reset">    <input type="button" value="button"></form><hr><table border="1">    <thead>        <tr>            <th>11</th>            <th>22</th>            <th>33</th>        </tr>    </thead>    <tbody>        <tr>            <td>1</td>            <td colspan="2">2列</td>        </tr>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td rowspan="2">2行</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>2</td>            <td>3</td>        </tr>    </tbody></table><ul>    <li></li>    <li></li>    <li></li></ul><ol>    <li>序列</li>    <li>序列</li>    <li>序列</li></ol><dl>    <dt>1</dt>        <dd>11</dd>        <dd>11</dd>        <dd>11</dd>    <dt>2</dt>        <dd>22</dd>        <dd>22</dd>        <dd>22</dd></dl></body></HTML>@H_301_43@  4、img、空格、大小于号、fIEldset及label(及包括点label跳到对应的input框):   
<!DOCTYPE HTML><HTML lang="en"><head>    <Meta charset="UTF-8">    <Title></Title></head><body><form action="https://www.sogou.com/web">    <input type="text" name="query">    <input type="submit" value="搜索"></form><p>&gt;&nbsp;&nbsp;&lt;</p><fIEldset>    <legend>登陆</legend>    <label for="i1">账号:</label>    <input ID="i1" type="text" name="user">    <br>    <label for="i2">账号:</label>    <input ID="i2" type="text" name="passwd"></fIEldset><img src="test.gif" Title="美女" alt="fuckme"></body></HTML>@H_301_43@  

 

HTML的相关知识就先这样吧……

总结

以上是内存溢出为你收集整理的01:HTML全部内容,希望文章能够帮你解决01:HTML所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1037228.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-24
下一篇 2022-05-24

发表评论

登录后才能评论

评论列表(0条)

保存