HTML基础

逃跑的火焰

本小白自学HTML基础中比较生疏的知识点汇总：

ul无序列表的type属性值：

disc 圆点

square 正方形

circle 空心圆

---

ol无序列表的type属性值：

1

A

a

I 大写罗马字母

I 小写罗马字母

---

a链接：

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

当链接为空的时候，点击超链接会刷新页面

---

title 链接提示文字

name 链接命名

---

锚链接：

<a href=”#锚名”>目录</a>

或者

<a href=”网页名称#锚名”>目录</a>

<a href=”#” name=”锚名”>内容</a>

---

Sublime常用快捷键：

输入!或者html，再tab键，可快速生成html模板

Crtl+j合并行，适合css样式最终整理

Crtrl+z撤销

Ctrl+y恢复撤销

Tab缩进

Shift+tab取消缩进

---

th表格头：内容居中，加粗显示

caption表格标题，居中显示

按照thead、tbody、tfoot的顺序依次显示

[HTML] 纯文本查看 复制代码

<table>
    <caption></caption>
    <tr>
        <th></th>
    </tr>
<tr>
    <td></td>
</tr>
</table>

表格属性：

width 表格宽度

align 表格相对于周围元素的对齐方式

cellpadding 单元格边沿与内容之间的距离

cellspacing 单元格之间的空白

frame 外侧边框属性：

void 不显示

above 显示上部

below 显示下部

hsides 显示上部和下部

vsides 显示左边和右边

lhs 显示左边

rhs 显示右边

box=border 所有四个边                              

rules 内侧边框属性：

none 没有

groups 位于行组和列组之间

rows 行之间

cols 列之间

all 行和列之间

表格demo：

[HTML] 纯文本查看 复制代码

<table width="500px" border="1" bgcolor="pink" cellspacing="5" cellpadding="10" frame="vsides" rules="rows">
        <caption>课程表</caption>
        <tr>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>课间活动</td>
            <td>课间活动</td>
            <td>课间活动</td>
            <td>课间活动</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
</table>

表格水平对齐align: center、left、 right 、justify、 char

表格垂直对齐valign: top 、middle 、bottom 、baseline

跨列colspan

跨行rowspan

---

表单input标签：

file 文件域

hidden 隐藏域

image 图像域，可以起到提交按钮的功能

[HTML] 纯文本查看 复制代码

<input type=”image” src=””/>

可作为图片按钮

---

text单行文本域：

maxlength 用户输入的最大字符长度

size 文本框的宽度，以字符数为单位，默认20个字符

[HTML] 纯文本查看 复制代码

<select>
    <option>请选择</option>
    <optgroup label=”组名”>
        <option></option>
    </optgroup>
</select>

multiple设置是否可多选

size 设置列表中可见项的数量

<select>标签中设置了multiple或size属性的话select是列表了，不是下拉菜单

---

form的enctype属性：提交表单前如何编码

application/x-www-form-urlencoded 默认

multipart/form-data 有上传file文件时

text/plain

---

上图下文可以使用自定义列表dl

图片是dt

文字解释是dd