前端HTML5学习笔记（一）

一、整体代码布局

<head> </head>：是头部，存放元数据，不会显示在浏览器上，是一些针对网页的设置项 <body> </body>：body内的内容直接显示在页面上。内容一定要写在标签内。

二、常用标签

注意：大多数标签成对出现，后边的标签比前边的多一个 /

1. 标题标签

<h>：标题标签
：段落标签

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>

    <p>
        风雨犹祝，山海同欢，是承天地之佑。
        星移斗转，沧海桑田，烟火人间依旧。
    </p>

2. 字样标签

：换行
：分割线
、：字体加粗

、：斜体字

：大字体

：小字体

：下划线

~~：删除线~~

_：上标

^：下标

这里是  换行操作。 <hr>  加粗 加粗 斜体 斜体 <big>大字体</big> 小字体 下划线 <del>删除线</del> 上标 下标 24 324

3. 图片标签

：图片标签

属性：

src 路径，即图片存放的位置。

alt 加载失败时的提示文字。

width height 宽高。

：超链接标签

属性：

a之间填写显示的文字。

href：将要跳转去的地址链接。

target：target="_blank" 在新建标签页打开。

title ：鼠标放到图片上会显示的文字。

<img src="../image/1.jp" alt="图片加载失败" width="500px" height="300px"> <img src="../image/1.jpg" alt="" width="500px" height="300px"> <hr> 百度一下<q>你就知道</q> <a href="https://www.baidu.com/" target="">Baidu</a> <a href="https://www.baidu.com/" target="_blank">Baidu</a> <a href="https://www.baidu.com/" title="点击将跳转到百度"><img src="../image/1.jpg" alt="" width="80px" height="40px"></a>

4. 列表标签

（1）有序列表

ol 为整个列表，li 表示每一个项。

可以利用 type 属性来改变序号的样式：type=" "，默认为数字1

1代表数字，A代表大写字母，a代表小写字母，I代表罗马数字，i代表小写罗马数字。

（2）无序列表

同上。type属性默认是disc小圆点，其他还有 circle圆圈、square方块。

（3）自定义列表

dl为整个列表，dt为列表头，dd为列表项。

 <ol type="a"> <li>计算机</li> <li>计算机</li> <li>计算机</li> </ol>  <ul type=""> <li>计算机</li> <li>计算机</li> <li>计算机</li> </ul>  <dl> <dt>列表头</dt> <dd>列表项</dd> <dd>列表项</dd> <dd>列表项</dd> </dl>

5. 表格标签

（1）创建表格：

表格有三层，最外层是table；中间层是tr，表示行；最内层是td，表示列。

caption 表示表格标题。

th 表头，自带加粗效果。（注：th要写在tr内。）

（2）表格属性：

border为边框，不写border表示没有，一般写1。

width height 是需要定义的宽高。

cellspacing 表格之间的空隙，一般把cellspacing设为0。

align = “center” 水平居中。写在 tr 或 td 都可。

<table border="1" width="200" height="100" cellspacing="0"> <caption>标题</caption> <tr align="center"> <th>(1,1)</th> <td>(1,2)</td> </tr> <tr align="center"> <th>(2,1)</th> <td>(2,2)</td> </tr> </table>

（3）合并单元格

合并列：

colspan （跨列合并），左合并右，把右边的删掉，删除的是同一个tr内的td。

合并行：

rowspan（跨行合并），上合并下，写在需要合并的最上面，把下面的删掉。删除的是不同tr内的td。

（4）练习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1" width="400" height="200" cellspacing="0" align="center"> <tr> <td></td> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> </tr> <tr> <td rowspan="2">上午</td> <td>123</td> <td>456</td> <td>789</td> <td>000</td> <td>145</td> <td>789</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td colspan="7">午休</td> </tr> <tr> <td rowspan="2">下午</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>