一、HTML部分

（一）HTML标签

1.简单标签

标签名	标签
标题	`<h1>-<h6>`
段落	`<p>`
换行	`<br>`
加粗	`<strong>、<b>`
倾斜	`<em>、<i>`
删除线	`<del>、<s>`
下划线	`<ins>、<u>`
空格	` `
小于号、大于号	`<`、`>`
水平线	`<hr>`

备注：

==1.有标题或者段落语义的地方适当运用标题或段落标签，不要全用<div>或。==

2.“|”一根竖线可用|,然后font-style:normal;

2.布局标签

标签名	标签	特点
大盒子	`<div>`	一行放一个
小盒子	`<span>`	一行放多个

3.图像标签

<img src="" alt="">

属性	含义
src	图片路径
title	鼠标放上面显示的文字
alt	图片不能显示而提示的文字
width	宽度
height	高度
border	边框粗细

备注：图像标签可放 里面，居中要给 居中。

4.路径

(1)相对路径

位置	写法
同一级	直接写
位于html文件下一级	images/aaa.png
位于html文件上一级	../aaa.png

(2)绝对路径

在电脑中的位置。

5.超链接标签

<a href="">文本或图片</a>

属性	含义
href	跳到哪个地址（可以是网址、html文件、zip压缩包、.exe下载文件）
target	弹出方式（默认为_self，新窗口为 _blank)

锚点链接：

<a href="#two">跳的地方</a>   <h3 id="two">跳到这里</h3>

6.表格标签

<table>
        <thead>
            <tr>
                <th>水果</th>
                <th>蔬菜</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>苹果</td>
                <td>西红柿</td>
            </tr>
        </tbody>
</table>

备注：tr一对表示一行，td表示单元格，th为表头，thead为头部，tbody为主体。

属性	含义
align	left、center、right（对齐方式）
border	1、“ ”（有无边框）
cellpadding	边缘与内容之间的空白
cellspacing	单元格之间的空白
width	宽度（值或百分比）（一般要加）
height	高度（值或百分比）

备注：

1.排版时如果有地方是空着的用 <td></td>。

2.合并单元格（合并后要删除多余的单元格）

（1）跨行：rowspan=" "（填个数）

（2）跨列：colspan=" "（填个数）

7.列表标签

（1）无序列表

    <ul>
        <li></li>
    </ul>

备注：去掉默认小黑点：li{list-style:none;}

（2）有序列表

    <ol>
        <li></li>
    </ol>

（3）自定义列表

    <dl>
        <dt></dt>
        <dd></dd>
    </dl>

备注：dt为名词（水果），dd为名词解释（苹果）。

8.表单标签

（1）表单域

<form action="地址" method="get/post" name=" ">

</form>

（2）表单

<input type=" " name=" " value=" " checked="checked" maxlength=" " id=" ">

备注：

1.value为默认显示，也用来更改按钮、提交、文件、重置的默认按钮文字，checked="checked"为默认选中（用于单选或多选），maxlength为最大长度。

==2.name用来区分，比如username、pwd、sex，单选或多选必须要加name，而且name要相同。==

3.表单放在表单域里面。

type属性	含义
button	按钮
checkbox	复选框（多选）
image	图片
password	密码
radio	单选
reset	重置
submit	提交
text	文本
file	文件

备注：

==1.若input加 id=“sex”，则<label for="sex">...</label>实现点 ... 旁边也有效。==

2.只有一个键则用复选框。

（3）下拉列表

    <select name="" id="">
        <option>水果</option>
        <option selected="selected">苹果</option>
        <option>李子</option>
    </select>

备注：selected="selected"为默认选中。

（4）文本域

<textarea name="" id="" cols="30" rows="10">我爱你</textarea>

备注：rows为行数，cols为每行字符数。

HTML标签 | 前端笔记（一）