【HTML】HTML基础知识

<!DOCTYPE html>表示HTML5文档申明，不区别大小写，通常这么写。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">表示HTML4文档申明。

 1 <!DOCTYPE html>
 2 <html lang="zh-CN"><!--lang="zh-CN"可以不写，作用不大，考虑文档规范性一般加上-->
 3 <head>
 4     <meta charset="utf-8"><!--无此行网页会显示乱码-->
 5     <title>HTML页面设计</title>
 6 </head>
 7 <body>
 8 这是中文
 9 </body>
10 </html>

元素：开始标签到结束标签之间的所有内容，例:<h1>表示标题</h1>为一个元素。

Sublime给HTML快速注释快捷键：Ctrl+/。

<hr>单标签，加一条水平线。

<p>表示一个段落</p>

 元素的属性：<p 属性名=属性值></p> 例<body bgcolor="blue">背景色，可设red、green、blue、yellow、orange、black等，或使用16进制格式#F5f5Dc</body>、<h1 align="center">对齐方式，默认left，可设right、center</h1>

文本元素：

<b>加粗文字</b>

<strong>强调文本，实际效果就是给文字加粗</strong>

<br>强制换行，br换行无段间距，p换行有段落间距。

有换行作用的标签：<h1></h1>-<h6></h6>、<p></p>、<br>

<i>文字倾斜italic</i>

<em>强调important，实际效果是倾斜</em>

<dfn>语义上表示定义术语，是对一个词或短语的解释，实际效果就是文字倾斜。</dfn>

<cite>语义上表示引用其他作品的标题，实际效果就是倾斜文字</cite>

<del>给文字加删除线</del>

<s>语义上表示不准确的删除，实际效果就是给文字加删除线</s>　　

<u>给文字加下划线underline</u>

<ins>实际效果也是给文字加下划线</ins>，语义上是添加一段文字，起强调作用。

<small>添加小号字体，语义上表示免责声明和澄清声明</small>

<sub>下标subscript</sub>

<sup>上标superscript</sup>

<abbr>表示一段文本的缩写，例WTO，在文本显示上没有实际效果</abbr>

<q>语义上表示引用来自其他地方的内容，实际效果是给文字加双引号</q>

<wbr>安全换行，abcdefghijklmnopqrstuvw<wbr>xyz，在浏览器窗口变小过程中如果不加<wbr>则整个一串字母会同时换下一行，如果加了<wbr>会先在<wbr>处换行。

<code>function(){}</code>用来表示计算机代码片段

<var>num</var>用来表示编程语言中的变量

<samp>表示程序或计算机的输出</samp>

kdb元素表示某部分内容是由用户利用键盘输入的，请按<kdb>Enter</kdb>键

<ruby>拼<rt>pin</rt></ruby><ruby>音<rt>yin</rt></ruby> <ruby>拼音<rt>pin yin</rt></ruby>给汉字加拼音，部分浏览器支持不友好。

<bdo dir="rtl">文字方向，默认是ltr，即left to right从左向右，可设rtl，即right to left从右到左</bdo>

 <mark>给文字加上黄色背景</mark>

<time>语义上表示日期时间，无特殊效果2017-04-16 16:18</time>

<span>表示一般性文本，无特殊效果</span>

<a href="https://www.sogou.com/">搜狗</a>链接到网站<br>

<a href="https://www.sogou.com/" target="_blank">搜狗</a>链接到网站<br> target默认值为_self表示在当前窗口打开，可省；_blank为表示在新窗口打开。
<a href="content10.pdf">本地文件</a>链接到本地文件<br>
<a href="http://www.163.com"><img src="D:图片图片.jpg"></a>图片链接<br>
<a href="mailto:188888888889999@qq.com">给我发邮件</a>发送邮件
<a href="mysqlconnectorjava.zip">下载文件</a>浏览器遇到无法解析的内容会自动下载

<a href="#1">锚点1</a>
<a href="#id2">锚点2</a>
<a href="#name3">锚点3</a> <br><br><br>
<a id="1">锚点1</a>id表示元素的身份证，具有唯一性。 <br><br>
<a id="id2">锚点2</a> <br><br>
<a name="name3">锚点3</a>name表示元素的名称，可以重复 <br><br><br>

<img src="D:图片图片.jpg" alt="图片无法显示时的替代文字" width="50%" height="100" title="当鼠标滑到图片上则显示此文字">指定图片的宽高，可用像素或百分比，如果只指定宽高其中之一则宽高比例不变，高度若设为百分比则无效，因为浏览器的高度不是固定的，所以高度只对像素有效。

<ul type="square">
<li>无序列表unordered list</li>
<li>type默认值为disc实心圆，可设circle空心圆、square实心正方形</li>
</ul>
<ol start="6">
<li>有序列表ordered list</li>
<li>type默认为数字</li>
<li value="11">有序列表ordered list</li>
<li>type默认为数字</li>
</ol>
<ol type="A">
<li>有序列表ordered list</li>
<li>有序列表</li>
</ol>
<ol type="a">
<li>有序列表ordered list</li>
<li>有序列表</li>
</ol>
<ol type="I">
<li>有序列表ordered list</li>
<li>有序列表</li>
</ol>
<ol type="i">
<li>有序列表ordered list</li>
<li>有序列表</li>
</ol>
<dl>自定义列表
<dt>列表项1</dt>
<dt>列表项2
<dd>列表项内容</dd>
<dd>列表项内容2</dd>
</dt>
</dl>

<table border="1">
<caption>表格标题</caption>
<colgroup span="1" style=" 50px"></colgroup><colgroup span="2" style=" 100px"><col style="background: green"><col style="background:blue"></colgroup><colgroup span="1" style=" 200px"></colgroup>
<thead>
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
</thead>
<tbody style="background: red">
<tr><td colspan="2">单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td></tr>
<tr><td rowspan="2">内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</tbody>
<tfoot>
<tr><td>内容</td></tr>
</tfoot>thead、tbody、tfoot的作用是维护表头表体表尾的位置，不会因代码中的位置改变而发生显示改变
</table>

符号

实体名称

实体数值

称号名称

&nbsp

&#160

空格

< 

&lt

&#60

小于

> 

&gt

&#62

大于

&

&amp

&#38

连接

“

&quot

&#34

双引号

±

&plusmn

&#177

正负值

©

&copy

&#169

著作权

®

&reg

&#174

注册商标

其他符号可网上查，建议使用实体数值，因为浏览器支持更友好。

一个表格实例：

<table align="center" border="1">
<caption><font color="green"><b>特殊符号的使用</b></font></caption>
<colgroup style="background: yellow"></colgroup><colgroup span="2" style="background: orange"></colgroup><colgroup style="background: yellow"></colgroup>
<thead style="background: blue">
<tr><th>符号</th><th>实体名称</th><th>实体数值</th><th>描述</th></tr>
</thead>
<tbody>
<tr align="center"><td></td><td>&#38nbsp</td><td>&#38#160</td><td>空格</td></tr>
<tr align="center"><td><</td><td>&#38lt</td><td>&#38#60</td><td>小于</td></tr>
<tr align="center"><td>></td><td>&#38gt</td><td>&#38#62</td><td>大于</td></tr>
<tr align="center"><td>&</td><td>&#38amp</td><td>&#38#38</td><td>连接符号</td></tr>
<tr align="center"><td>"</td><td>&#38quot</td><td>&#38#34</td><td>双引号</td></tr>
<tr align="center"><td>±</td><td>&#38plusmn</td><td>&#38#177</td><td>正负值</td></tr>
<tr align="center"><td>©</td><td>&#38copy</td><td>&#38#169</td><td>著作权</td></tr>
<tr align="center"><td>®</td><td>&#38reg</td><td>&#38#174</td><td>注册商标</td></tr>
</tbody>
<tfoot style="background: gray">
<tr align="center"><td colspan="4">其他的符号大家可以网上搜索一下，知道常用的即可……</td></tr>
</tfoot>
</table>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8"><!--meta是个单标签，且只能放在head标签中使用-->
 6     <meta name="作者" content="你的姓名">
 7     <meta name="keywords" content="HTML5">
 8     <meta http-equiv="refesh" content="1;http://www.sogou.com">
 9     <title></title>
10     <style type="text/css">
11         .class1{background: red;}
12         P{color:green}
13         #div1{background: pink;width: 100%;height: 600px}
14         #div2{background: green;width: 100%;height: 10%}
15     </style><!--内部样式表：给下面的所有p元素统一样式，如果有冲突则以具体元素设置的为准。-->
16 </head>
17 
18 <body style="margin: 0"><!--margin:0设置整个页面无边距-->
19 
20     <pre>空                        格
21     换行 pre为previous，即保留原来的格式
22     </pre>
23 
24     <p>通用属性id、class、style、title、dir、lang可以在任何元素标签里设置</p>
25     <p>其他通用属性：accesskey元素快捷键、tabindex元素移动顺序、draggable元素拖动、contenteditable元素是否允许编辑、hidden隐藏元素、spellcheck元素检查、contextmenu元素快捷菜单、data-yourvalue自定义属性</p>
26     <p>name和id必须是大小写字母开头，其后可跟字母数字下划线点号，name和id是区别大小写的</p>
27     <p>属性值为数值时必须是正整数，不能为0或负数或小数</p>
28     <p>width、height单位默认为像素px，可省单位px，但在style中必须注明单位px，否则达不到效果。</p>
29 
30     <div id="div1">
31         <div id="div2">div通用块元素上</div>
32         <div style="background: yellow; 20%;height: 80%;float: left;">左</div><div style="background: red; 80%;height: 80%;float: left;">右</div>
33         <div style="background: blue; 100%;height: 10%;clear: left;">底</div>
34     </div><!--width和height值要跟px，否则无效果。-->
35 
36     <!--
37     <table>
38         <tr><td><a href="http://sogou.com" target="myframe"><img src="搜狗.jpg" alt="搜狗"></a></td><td rowspan="2"><iframe src="http://www.sogou.com" frameborder="1" width="800" height="800" name="myframe"></iframe>iframe内联框架，src为默认打开的网页，frameborder为框架的边框，width、height可设像素或百分比。</td></tr>
39         <tr><td><a href="http://163.com" target="myframe"><img src="网易.jpg" alt="网易"></a></td></tr>        
40     </table>
41     -->
42 
43     <hr>
44 
45     <p style="color:red">样式基础</p><!--内联样式表-->
46     <p class="class1">样式基础</p>
47     <p style="font: bold;">样式基础</p>
48     <p>样式基础</p>
49 
50     <hr>
51 
52     <link rel="stylesheet" type="text/css" href="">
53 
54     <hr>
55 
56     <table align="center" border="1" cellpadding="10" cellspacing="0"><!--cellpadding设置表格内容与单元格边框的距离，cellspacing设置单元格与单元格之间的距离及单元格与表格外边框之间的距离。-->
57         <caption><font color="green"><b>特殊符号的使用</b></font></caption>
58         <colgroup style="background: yellow"></colgroup><colgroup span="2" style="background: orange"></colgroup><colgroup style="background: yellow"></colgroup>
59         <thead style="background: blue">
60             <tr><th>符号</th><th>实体名称</th><th>实体数值</th><th>描述</th></tr>
61         </thead>
62         <tbody>
63             <tr align="center"><td></td><td>&#38nbsp</td><td>&#38#160</td><td>空格</td></tr>
64             <tr align="center"><td><</td><td>&#38lt</td><td>&#38#60</td><td>小于</td></tr>
65             <tr align="center"><td>></td><td>&#38gt</td><td>&#38#62</td><td>大于</td></tr>
66             <tr align="center"><td>&</td><td>&#38amp</td><td>&#38#38</td><td>连接符号</td></tr>
67             <tr align="center"><td>"</td><td>&#38quot</td><td>&#38#34</td><td>双引号</td></tr>
68             <tr align="center"><td>±</td><td>&#38plusmn</td><td>&#38#177</td><td>正负值</td></tr>
69             <tr align="center"><td>©</td><td>&#38copy</td><td>&#38#169</td><td>著作权</td></tr>
70             <tr align="center"><td>®</td><td>&#38reg</td><td>&#38#174</td><td>注册商标</td></tr>            
71         </tbody>
72         <tfoot style="background: gray">
73             <tr align="center"><td colspan="4">其他的符号大家可以网上搜索一下，知道常用的即可……</td></tr>
74         </tfoot>
75     </table>
76 
77     <hr>
78 
79     <ul>
80         <li class="class1">无序列表</li>
81         <li style="list-style-type: none;">无序列表</li><!--list-style-type: none作用是去掉前面的点-->
82         <li style="background: red">无序列表</li>
83     </ul>
84 
85 </body>
86 </html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiongjiawei/p/6718566.html