<!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>

符号

实体名称

实体数值

称号名称

&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>

 <!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>&#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>

     <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>

【HTML】HTML基础知识的更多相关文章

  1. .NET面试题系列[1] - .NET框架基础知识(1)

    很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...

  2. RabbitMQ基础知识

    RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...

  3. Java基础知识（壹）

    写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...

  4. selenium自动化基础知识

    什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...

  5. [SQL] SQL 基础知识梳理（一）- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  6. [SQL] SQL 基础知识梳理（二） - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  7. [SQL] SQL 基础知识梳理（三） - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  8. [SQL] SQL 基础知识梳理（四） - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  9. [SQL] SQL 基础知识梳理（五） - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

  10. APP测试入门篇之APP基础知识(001)

    前言        最近两月比较多的事情混杂在一起,静不下心来写点东西,月初想发表一遍接口测试的总结,或者APP测试相关的内容,一晃就月底了,总结提炼一时半会也整不完.放几个早年总结内部培训PPT出来 ...

随机推荐

  1. Shiro SpringMVC 非maven HelloWorld

    项目用到Shiro就从网上找一些案例看看吧,结果看了很多都是maven的,没有办法就自己弄了一个.废话不多说,原理自己找开始上菜. 配置web.xml <?xml version="1 ...

  2. PullToRefreshListView插件初次进入页面自动刷新

    只要将PullToRefreshListView源码中的: @Override protected void onRefreshing(final boolean doScroll) { /** * ...

  3. Redis使用说明详解

    原博主地址:http://www.cnblogs.com/wangyuyu/p/3786236.html Redis使用详细教程 一.Redis基础部分: 1.redis介绍与安装比mysql快10倍 ...

  4. 《Metasploit魔鬼训练营》第七章学习笔记

    P314 木马程序的制作 msfpayload和msfencoder已被msfvenom取代.使用msfvenom -h查看具体用法.以下网址也有相关教程: https://github.com/ra ...

  5. 快速拥有各种数据访问SqlHelper

    常加班食不按时,偶得清闲嘴溃疡. 美食一顿成泡汤,自此自认忙命人. 这就是此情此景的我,回来聊代码. 列举ADO.NET中的五个主要对象,并简单描述? 答:Connection连接对象,Command ...

  6. Python 学习之路2

    这是我在大学上机实验的作业 实验一 将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. 首先,先谈下我的设计思路: 设计思路: 1.    先需判断输入的number是不是一个数字( ...

  7. Python crawler access to web pages the get requests a cookie

    Python in the process of accessing the web page,encounter with cookie,so we need to get it. cookie i ...

  8. css实现六边形图片（最简单易懂方法实现高逼格图片展示）

    不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...

  9. 2712:细菌繁殖-poj

    2712:细菌繁殖 总时间限制:  1000ms 内存限制:  65536kB 描述 一种细菌的繁殖速度是每天成倍增长.例如:第一天有10个,第二天就变成20个,第三天变成40个,第四天变成80个,… ...

  10. Activity 的 4 种加载模式

    Activity 的 4 种加载模式 配置 Activity 时可指定 android:launchMode 属性,该属性用于配置该 Activity 的加载模式.该属性支持如下 4 个属性值. * ...