HTML结构

HTML文件基本结构

<html>
	<head>
		<title>第一个页面</title>
	</head>
	<body>
		hello world
	</body>
</html>

HTML标签

注释标签

注释不会显示在界面上，目的是提高代码的可读性。

<!-- 注释 -->

ctrl+/ 快捷键可以快速进行注释或取消注释。
注释不能嵌套

标题标签h1-h6

从h1-h6，数字越大，则字体越小。

  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>

在这里插入图片描述

段落标签 p

   <p>这是第一段</p>
   <p>这是第二段</p>
   <p>这是第三段</p>

在这里插入图片描述

每个p标签是独占一行的，p标签之间是有段落间距的。
注：
（1）p标签之间存在一个空隙
（2）当前的p标签描述的段落，前面还没有缩进
（3）html内容首尾处的换行，空格均无效
（4）在html中文字之间输入的多个空格只相当于一个空格
（5）html中直接输入换行不会真的换行，而是相当于一个空格

换行标签 br

br标签是一个单标签，只有开始标签，没有结束标签。


 

</br>

html中常用的转义字符

在这里插入图片描述

格式化标签

   <strong>加粗</strong>
   <b>加粗</b>
   <em>倾斜</em>
   <i>倾斜</i>
   <del>删除线</del>
   <s>删除线</s>
   <ins>下划线</ins>
   <u>下划线</u>

在这里插入图片描述

图片标签 img

img是一个单标签

<img src="one.jpg" alt="" title=""> <!-- 同级目录 -->

alt:替换文本，当文本不能正确显示的时候，会显示一个替换文字
title：提示文本，鼠标放在图片上就会有提示

（1）使用相对路径：创建一个image目录和html同级，并放入一个one.jpg

<img src="image/one.jpg">

（2）使用相对路径：在image目录中创建一个html，并访问上级目录的one.jpg

<img src="../one.jpg">

（3）使用绝对路径：

<img src="E:/one.jpg">

（4）使用绝对路径：使用网络路径

<img src="http://images/one.jpg">

超链接标签 a

（1）外部链接

<a href="https://www,baidu.com">百度</a>

（2）内部链接

<a href="two.html">跳转到第二页</a>

a标签是行内元素，不是块级元素。
（3）空链接

<a href="#">空链接</a>

（4）下载链接

<a href="test.zip">下载文件</a>

（5）网页元素链接

<a href="two.html">
	<img src="one.jpg">
</a>

表格标签

  <table align="center" border="2px" cellspacing="0" width="500" height="100" >
       <tr>
       <th>姓名</th>
       <th>体重</th>
    </tr>
       <tr>
           <td>张三</td>
           <td>100</td>
       </tr>
       <tr>
        <td>李四</td>
        <td>110</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>100</td>
    </tr>
   </table>

在这里插入图片描述

列表标签

<h3>无序列表</h3>
   <ul>
       <li>第一名</li>
       <li>第二名</li>
       <li>第三名</li>
   </ul>
   <h3>有序列表</h3>
   <ol>
    <li>第一名</li>
    <li>第二名</li>
    <li>第三名</li>
   </ol>
    <h3>自定义列表</h3>
   <dl>
       <dt>排名</dt>
       <dd>第一</dd>
       <dd>第二</dd>
       <dd>第三</dd>
   </dl>

在这里插入图片描述

表单标签

<form>
</form>

input标签
（1）文本框

<input type="text">

（2）密码框

<input type="password">

（3）单选框

<input type="radio" name="gender">男
 <input type="radio" name="gender" checked="chnecked">女

（4）复选框

<input type="checkbox" checked="checked">吃饭
<input type="checkbox">睡觉
<input type="checkbox">学习

（5）普通按钮

<input type="button" value="按钮">

（6）选择文件

<input type="file">

在这里插入图片描述

select标签

 <select>
        <option>--请选择颜色</option>
        <option selected="selected">红色</option>
        <option>蓝色</option>
        <option>绿色</option> 
        <option>紫色</option>
    </select>

textarea标签

<textarea rows="3" cols="5"></textarea>

无语义标签 div & span

div和span就是两个盒子，用于网页布局

div是独占一行的，是一个大盒子
span不独占一行，是一个小盒子

<div>
    <span>喜羊羊</span>
    <span>美羊羊</span>
    <span>沸羊羊</span>    
</div>
<div>
    <span>懒羊羊</span>
    <span>沸羊羊</span>
    <span>村长</span> 
</div>