web前端基础

慕容峻才

修改于 2020-10-23 10:04:43

1.2K0

修改于 2020-10-23 10:04:43

文章被收录于专栏：web前端开发实战

HTML

html的基本组成？

html由四个标签组成：

html标签
head标签
title标签
body标签

HTML标签的分类？

HTML标签又分为全封闭标签和半封闭标签：

全封闭标签：<h1></h1>
半封闭标签：<img src=xxx>

HTML基础标签？

标签	描述
`<b></b>`	加粗
`<i></i>`	斜体
`<u></u>`	下划线
`<s></s>`	删除线
`<p></p>`	段落
`<h1></h1>`	一级标题
`<hr>`	横线
`<br>`	换行

HTML 特殊字符?

符号	描述
	空格
`>`	大于号
`<`	小于号
`&`	&
`¥`	￥
`©`	版权标识
`®`	注册

div和span标签？

div标签：用来定义一个块级标签又称为行外标签，块级标签独占一行

span标签：用来定义一个内联标签又称行内标签，行内标签不独占一行

块级标签和内联标签分类：

块级标签	内联标签
p、h1~h6、hr、div	b、i、u、s、span

注意：块级标签可以包含内联标签，但是内联标签不能包含块级标签

图片img 标签？

img标签用来加载图片资源。

img标签属性：

标签属性	描述
alt	当图片加载失败时，显示的文字
title	当鼠标悬浮再图片时显示的文字

代码示例：

<img src="syr.jpg" alt="我是赛亚人" title="我是赛亚人">

超链接a标签？

超链接标签属性：

标签属性	描述
target	点击超链接的动作
href	要跳转的网址

代码示例：跳转到https://www.acai.cloud地址时用浏览器空白标签页打开

<a target="_blank" href="https://www.acai.cloud">acai.cloud</a>

设置a标签点击不刷新页面：

<a href="#">acai.cloud</a>

去除a标签下划线：

<style>
    a{
        text-decoration: none;
    }
</style>

设置a标签锚点功能：点击回到顶部，页面跳转到顶部位置

<a name="#top">顶部位置</a><br>
……
<a href="##top">回到顶部</a>

ul列表标签？

HTML列表分为两种：无序列表标签ul、列表标签li、有序列表标签ol

ul列表标签type属性：

标签type属性	描述
disc	实心圆
circle	空心圆
square	实心方块
none	无样式

代码示例：

<ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

有序列表标签ol：

ol列表标签属性：

标签属性	描述
start	起始值，如果没有该属性默认为1
type	显示序号时数字还是字母

代码示例：

<ol start="a" type="a">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

table表格标签？

table表格标签组成：

标签	描述
`<thead></thead>`	标题部分
`<tbody></tbody>`	内容部分
`<tr></tr>`	行
`<th></th>`	单元格
`<td></td>`	单元格

table表格属性：

属性	描述
border	表格边框
cellpadding	内边距
cellspacing	外边距
rowspan	单元格竖跨多少行
colspan	单元格横跨多少行，即合并单元格

代码示例：

<table border="1" cellpadding="10" cellspacing="2">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>阿才</td>
            <td>27</td>
        </tr>
    </tbody>
</table>

input输入框标签？

input标签type属性：

属性	描述
text	文本输入
password	密码输入
checkbox	多选框
date	日期选择框
datetime-local	日期事件选择框
radio	单选框，需要配合name属性使用
submit	提交按钮
reset	重置按钮
button	普通按钮
hidden	隐藏输入框
file	文件选择框

代码示例：

#输入框：
<div>
    用户: <input type="text">
</div>
<div>
    密码: <input type="password">
</div>

#单选框：
<div>
    性别: <input type="radio" name="sex">男
          <input type="radio" name="sex">女
</div>

select下拉框标签？

代码示例：

<select>
    <option>男</option>
    <option>女</option>
</select>

form表单标签？

代码示例：

<form action="http://127.0.0.1:8003">
    user: <input type="text" name="user">
    pass: <input type="password" name="pass">
    <input type="submit" value="login">
    <input type="reset">
</form>