HTML：TR TD TH OL UL
什么是HTML
超文本标记语言(HyperText Markup Language)，标准通用标记语言下的一个应用； 是网页制作必备的编程语
言
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
HTML 不是一种编程语言，而是一种标记语言.
HTML基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>我的第一个标题。</h1>
<p>我的第一个段落。</p>
</body>
</html>
- 声明为 HTML 文档，HTML文档也常称为网页
- 个文档包含HTML标签和文本
- 与 之间的文本描述网页，同时HTML元素也是当前页面的根元素
- 是包含了文档的元(meta)数据，如定义网页编码格式
</strong>元素描述当前文档页面的标题</li> <li> <body> 与 </body> 之间的文本是可见的页面内容 </li> <li>**<h1> **与 **</h1> **之间的文本被显示为标题</li> <li>**<p> **与 <strong></p></strong> 之间的文本被显示为段落</li> </ul> <h2 id="html注释">HTML注释</h2> <blockquote> <p>这是一个H5标题</p> </blockquote> <h2 id="html标签">HTML标签</h2> <blockquote> <p>HTML标记标签通常被称为HTML标签（HTML tag）</p> </blockquote> <ul> <li>HTML 标签是由尖括号包围的关键词，比如 <html></li> <li>HTML 标签通常是成对出现的，比如 <> 和 </b></li> <li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li> <li>多数情况下，HTML文档中的标签可以互相嵌套，实现更复杂的功能</li> </ul> <h3 id="基本标签">基本标签</h3> <ul> <li> <p>标题标签：h1~h6</p> <pre><code class="language-html"><h1> 这是一个最大的标题 </h1> </code></pre> </li> <li> <p>段落标签：p</p> <pre><code class="language-html"><p> 每一个段落标签中的内容都会换行输出 </p> </code></pre> </li> <li> <p>块级标签：div</p> <pre><code class="language-html"><div style="color: #FF0000"> <h1> div标签常用来组合一整块标签内容 </h1> <p> 以便通过CSS样式来对其中这些元素进行格式化控制 比如当前div标签下的所有文本均为红色 </p> </div> </code></pre> </li> <li> <p>换行标签：br</p> <pre><code class="language-html">111 <br> 222 </code></pre> </li> <li> <p>图片标签：img</p> <pre><code class="language-html"><img src = 'xxx.img' alt='图片'> </code></pre> <ul> <li>src : 用来指明当前图片的路径 。</li> <li>alt : <ol> <li>光标位于图片时候所显示的内容。</li> <li>当图片加载失败的时候显示的内容。</li> </ol> </li> </ul> </li> <li> <p>链接标签：a</p> <pre><code class="language-html"><a src = 'http://www.baidu.com'> 百度 </a> </code></pre> <ul> <li>href : 控制访问地址</li> <li>a : 标签的文本为元素展示页面内容</li> </ul> </li> <li> <p>a无序列表：ul、li</p> <pre><code class="language-html"><ul> <li>无序列表项1</li> <li>无序列表项2</li> <li>无序列表项3</li> </ul> </code></pre> <ul> <li>ul:指明当前为无序列表</li> <li>li:具体列表项使用这个标签</li> <li>单个列表项可不加ul标签</li> </ul> </li> <li> <p>有序列表：ol、li</p> <pre><code class="language-htm"><ol> <li>A</li> <li>B</li> <li>C</li> </ol> </code></pre> <ul> <li>ol:指明当前为有序列表</li> <li>li:具体列表项使用这个标签</li> <li>单个列表项可不加ul</li> </ul> </li> </ul> <h2 id="连接外部">连接外部</h2> <blockquote> <p>像img等类似的标签需要我们去访问一个外部文件，常用的方式有如下几种</p> </blockquote> <ul> <li> <p>引入外部图片:</p> <pre><code class="language-html"><img src="img/1.jpg" alt="图片" /> </code></pre> </li> <li> <p>引入另一个网页</p> <pre><code class="language-html"><a src="other.html">其他页面</a> </code></pre> </li> <li> <p>引入CSS样式文件：</p> <pre><code class="language-html"><link rel="stylesheet" type="text/css" href="css/main.css"/> </code></pre> <ul> <li> <p>rel: relationship的英文缩写,用于定义链接的文件和HTML文档之间的关系</p> <p>stylesheet: 样式表</p> </li> <li> <p>type: 外链文档的类型</p> </li> <li> <p>href: 外链文档的路径</p> </li> </ul> </li> <li> <p>引入js文件：</p> <pre><code class="language-html"><script type = 'text/javascript' scr = 'js/jquery.js'></script> </code></pre> </li> <li> <p>src 与 href：</p> <ul> <li>src用于引入资源，引入的资源为页面不可缺少的一部分，类似于换内裤。</li> </ul> </li> </ul>