前端基础复习--HTML篇

html: html文件根标签

head：编写页面相关的属性

title：页面标题

body：页面内容展示信息

标题标签：h1 - h6，数字越大，字体越小，例如：

html 复制代码

<h1>hello</h1>

p标签：段落标签，回车换行会解析成空格

<br/>：换行标签

换行标签换行后间隙比段落标签间隙小

格式化标签：

加粗：strong 标签和 b 标签
倾斜：em 标签和 i 标签
删除线：del 标签和 s 标签
下划线: ins 标签和 u 标签

img标签：

img标签必须带有 src 属性。表示图片的路径

html 复制代码

<img src="rose.jpg">

相对路径： ./xxx.png

./img/xxx.png 在某个文件夹下

../img/xxx.png

绝对路径：图片路径网络上的图片

alt：替换文本，当文本不能正确显示的时候，会显示一个替换的文字
title：提示文本，鼠标放到图片上，就会有提示
width / height：控制宽度高度，高度和宽度一般改一个就行，另外一个会等比例缩放。否则就会图片失衡
border：边框，宽度的像素，一般使用CSS来设定

html 复制代码

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">

超链接标签：

href：必须具备，表示点击后会跳转到哪个页面
target：打开方式，默认是_self。如果是_blank则用新的标签页打开

链接也可以是图片，例如：

html 复制代码

<a>
    <img src="xxx.png" alt="">
</a>

表格标签：

table标签: 表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格，会居中加粗
thread：表格的头部区域（注意和 th 区分，范围是比 th 要大的）
tbody：表格得到主体区域

表格标签有一些属性，可以用于设置大小边框等，但是一般使用 CSS方式来设置。

这些属性都要放到 table 标签中

align 是表格相对于周围元素的对齐方式，align="center"（不是内部元素的对齐方式）
border 表示边框。1表示有边框（数值越大，边框越粗），""表示没边框
cellpadding：内容距离边框的距离，默认1像素
cellspacing：单元格之间的距离，默认2像素
width / height：设置尺寸
colspan**：** 单元格横向跨越的列数。
rowspan**：** 单元格纵向跨越的行数。

列表标签：

主要使用来布局的，整齐好看

输入的时候便捷方式：ul>li*2 （2表示总共几行）

无序列表【重要】 ul li,

html 复制代码

<ul type="square">
    <li>这是内容1</li>
    <li>这是内容2</li>
</ul>

disc（默认值）：使用实心圆（实心圆点）作为列表项标记。

circle：使用空心圆（空心圆点）作为列表项标记。

square：使用实心方块（实心方点）作为列表项标记。

有序列表【用的不多】 ol li

html 复制代码

<ol type="a">
    <li>这是内容1</li>
    <li>这是内容2</li>
</ol>

a 表示小写英文字母编号

A 表示大写英文字母编号

i 表示小写罗马数字编号

I 表示大写罗马数字编号

1 表示数字编号《默认》

自定义列表【重要】 dl（总标签） dt（小标题） dd（围绕标题来说明）上面有几个围绕着标题来展开的。

html 复制代码

<dl>
    <dt>自定义列表标题</dt>
    <dd>咬人猫</dd>
    <dd>兔总裁</dd>
</dl>

**表单标签：**用来完成和服务器的一次交互

html 复制代码

<form action="">
    姓名<input type="text">
    <br/>
    密码<input type="password">
    <br/>
    性别<input type="radio" name="gender">男
    <input type="radio" name="gender" checked="checked">女
    <br/>
    爱好<input type="checkbox">吃饭
    <input type="checkbox">睡觉
    <input type="checkbox">玩游戏
    <br/>
    <input type="button" value="这是一个普通按钮" onclick="alert('hello')">
</form>

action后填服务器端的一个路由地址

表单域：包含表单元素的区域，重点是form标签
表单控件：输入框，提交按钮等，重点是input标签

可以通过对type进行对应的取值，来控制input类型。

text：单行输入

password：密码

radio：单选框 name="gender"：只能单选一个 checked：默认选择

checkbox：复选框

button：普通按钮，搭配 JS 使用

提交/重置/上传文件按钮：

action：后写提交到什么地方

html 复制代码

<form action="">
    课程：<input type="text" name="course">   
    <input type="submit">
    <input type="reset">
    <input type="file">
</form>

label标签：

搭配input使用，点击label也能选中对应的单选/复选框，能够提升用户体验

for属性：指定当前label和哪个相同id的Input标签对应，（此时点击才是有用的）

html 复制代码

<label for="male">男</label> 
<input id="male" type="radio" name="sex">
<label for="female">女</label> 
<input id="female" type="radio" name="sex">

点击男/女也可以选中按钮

select标签：

下拉菜单

option中定义 selected="selected"表示默认选中

html 复制代码

<select name="" id="">
    <option value="">--请选择年份--</option>
    <option value="" selected="selected">--1996--</option>
    <option value="">--1997--</option>
    <option value="">--1998--</option>
    <option value="">--1999--</option>
</select>

textarea标签：

html 复制代码

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

超过10行会出现滚轮，实际开发通过CSS实现效果

无语义标签：div & span

div：是独占一行的，是一个大盒子

span：不独占一行，是一个小盒子

特殊字符：

 ：空格

<：小于号

>：大于号

&：按位与