【HTML】HTML基础知识
<!DOCTYPE html>表示HTML5文档申明，不区别大小写，通常这么写。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">表示HTML4文档申明。
<!DOCTYPE html>
<html lang="zh-CN"><!--lang="zh-CN"可以不写，作用不大，考虑文档规范性一般加上-->
<head>
<meta charset="utf-8"><!--无此行网页会显示乱码-->
<title>HTML页面设计</title>
</head>
<body>
这是中文
</body>
</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="width: 50px"></colgroup><colgroup span="2" style="width: 100px"><col style="background: green"><col style="background:blue"></colgroup><colgroup span="1" style="width: 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>
|
符号 |
实体名称 |
实体数值 |
称号名称 |
|
  |
  |
空格 |
|
|
< |
< |
< |
小于 |
|
> |
> |
> |
大于 |
|
& |
& |
& |
连接 |
|
“ |
" |
" |
双引号 |
|
± |
± |
± |
正负值 |
|
© |
© |
© |
著作权 |
|
® |
® |
® |
注册商标 |
|
其他符号可网上查，建议使用实体数值，因为浏览器支持更友好。 |
|||
一个表格实例：
<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>&nbsp</td><td>&#160</td><td>空格</td></tr>
<tr align="center"><td><</td><td>&lt</td><td>&#60</td><td>小于</td></tr>
<tr align="center"><td>></td><td>&gt</td><td>&#62</td><td>大于</td></tr>
<tr align="center"><td>&</td><td>&amp</td><td>&#38</td><td>连接符号</td></tr>
<tr align="center"><td>"</td><td>&quot</td><td>&#34</td><td>双引号</td></tr>
<tr align="center"><td>±</td><td>&plusmn</td><td>&#177</td><td>正负值</td></tr>
<tr align="center"><td>©</td><td>&copy</td><td>&#169</td><td>著作权</td></tr>
<tr align="center"><td>®</td><td>&reg</td><td>&#174</td><td>注册商标</td></tr>
</tbody>
<tfoot style="background: gray">
<tr align="center"><td colspan="4">其他的符号大家可以网上搜索一下，知道常用的即可……</td></tr>
</tfoot>
</table>
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8"><!--meta是个单标签，且只能放在head标签中使用-->
<meta name="作者" content="你的姓名">
<meta name="keywords" content="HTML5">
<meta http-equiv="refesh" content="1;http://www.sogou.com">
<title></title>
<style type="text/css">
.class1{background: red;}
P{color:green}
#div1{background: pink;width: 100%;height: 600px}
#div2{background: green;width: 100%;height: 10%}
</style><!--内部样式表：给下面的所有p元素统一样式，如果有冲突则以具体元素设置的为准。-->
</head> <body style="margin: 0"><!--margin:0设置整个页面无边距--> <pre>空 格
换行 pre为previous，即保留原来的格式
</pre> <p>通用属性id、class、style、title、dir、lang可以在任何元素标签里设置</p>
<p>其他通用属性：accesskey元素快捷键、tabindex元素移动顺序、draggable元素拖动、contenteditable元素是否允许编辑、hidden隐藏元素、spellcheck元素检查、contextmenu元素快捷菜单、data-yourvalue自定义属性</p>
<p>name和id必须是大小写字母开头，其后可跟字母数字下划线点号，name和id是区别大小写的</p>
<p>属性值为数值时必须是正整数，不能为0或负数或小数</p>
<p>width、height单位默认为像素px，可省单位px，但在style中必须注明单位px，否则达不到效果。</p> <div id="div1">
<div id="div2">div通用块元素上</div>
<div style="background: yellow;width: 20%;height: 80%;float: left;">左</div><div style="background: red;width: 80%;height: 80%;float: left;">右</div>
<div style="background: blue;width: 100%;height: 10%;clear: left;">底</div>
</div><!--width和height值要跟px，否则无效果。--> <!--
<table>
<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>
<tr><td><a href="http://163.com" target="myframe"><img src="网易.jpg" alt="网易"></a></td></tr>
</table>
--> <hr> <p style="color:red">样式基础</p><!--内联样式表-->
<p class="class1">样式基础</p>
<p style="font: bold;">样式基础</p>
<p>样式基础</p> <hr> <link rel="stylesheet" type="text/css" href=""> <hr> <table align="center" border="1" cellpadding="10" cellspacing="0"><!--cellpadding设置表格内容与单元格边框的距离，cellspacing设置单元格与单元格之间的距离及单元格与表格外边框之间的距离。-->
<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>&nbsp</td><td>&#160</td><td>空格</td></tr>
<tr align="center"><td><</td><td>&lt</td><td>&#60</td><td>小于</td></tr>
<tr align="center"><td>></td><td>&gt</td><td>&#62</td><td>大于</td></tr>
<tr align="center"><td>&</td><td>&amp</td><td>&#38</td><td>连接符号</td></tr>
<tr align="center"><td>"</td><td>&quot</td><td>&#34</td><td>双引号</td></tr>
<tr align="center"><td>±</td><td>&plusmn</td><td>&#177</td><td>正负值</td></tr>
<tr align="center"><td>©</td><td>&copy</td><td>&#169</td><td>著作权</td></tr>
<tr align="center"><td>®</td><td>&reg</td><td>&#174</td><td>注册商标</td></tr>
</tbody>
<tfoot style="background: gray">
<tr align="center"><td colspan="4">其他的符号大家可以网上搜索一下，知道常用的即可……</td></tr>
</tfoot>
</table> <hr> <ul>
<li class="class1">无序列表</li>
<li style="list-style-type: none;">无序列表</li><!--list-style-type: none作用是去掉前面的点-->
<li style="background: red">无序列表</li>
</ul> </body>
</html>
最新文章
- ubuntu14.04下搭建python+mysql环境
- MFC 关于如何实现浏览文件
- 动态dynamically变更母版_Layout页body标签css的class
- DEDE列表页直接获取下载链接
- 数据结构：后缀自动机 WJMZBMR讲稿的整理和注释
- oracle 存储过程和函数例子
- Top JavaScript Frameworks, Libraries & Tools and When to Use Them
- 第一百九十三天 how can I 坚持
- 不能将“const char [7]”转换为“LPCTSTR”
- ReactNative布局样式总结
- 【jQuery】(7)---jQueryAjax同步异步区别
- Android中PropertyAnimation属性动画详解（一）
- 全面解读Java NIO工作原理(4)
- 理解DeepBox算法
- 6-11-N皇后问题-树和二叉树-第6章-《数据结构》课本源码-严蔚敏吴伟民版
- matlab一行太长
- Elasticsearch5.3.1 IK分词，同义词/联想搜索设置
- 运行代码时报linker command failed with exit code 1 错误
- iOS电话等中断事件的开始和结束通知
- 如何在ASP.NET页面中使用异步任务(PageAsyncTask)