web前端基础
HTML
html的基本组成？
<!--more-->
html由四个标签组成：
- html标签
- head标签
- title标签
- body标签
HTML标签的分类？
HTML标签又分为全封闭标签和半封闭标签：
- 全封闭标签：
<h1></h1> - 半封闭标签：
<img src=xxx>
HTML基础标签？
标签 | 描述 |
|---|---|
| 加粗 |
| 斜体 |
| 下划线 |
| 删除线 |
| 段落 |
| 一级标题 |
| 横线 |
| 换行 |
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表格标签组成：
标签 | 描述 |
|---|---|
| 标题部分 |
| 内容部分 |
| 行 |
| 单元格 |
| 单元格 |
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>CSS
JS
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。