前端（HTML、CSS、JS）

最新推荐文章于 2024-10-16 11:23:07 发布

lesliecloud

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量296

点赞数

分类专栏：前端文章标签：前端 html js css

本文链接：https://blog.csdn.net/AlbanCP3/article/details/89923386

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.HTML

html即Hyper Text Markup Language，超文本标记语言，核心是标签的使用，以下直接整理常用的标签：

1.内置标签

这种叫法可能不太准确，这里指的是页面的关键标签，而不是填充，是构成页面的基础

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

<!--
1. DOCTYPE是类似于声明要用的解释器的东西，有助于正确显示内容
2. html标签是声明文档类型，声明该文件是HTML文档，按HTML的规范处理;其中lang属性指定语言，如果设置为en浏览器可能会询问是否翻译当前页面
3. head标签描述头部信息（一般包括了设置，标题，样式信息，JS代码等）
4. meta设置页面基础信息，属性charset用于设置字符集（防止出现乱码）
5. title标签内为页面的标题（即浏览器中页面的标签名）
6. body页面内容的容器，在页面中显示的所有东西都在其中
-->

2.常用的页面内容标签

即在设计页面时往页面中添加元素用到的标签

# 常用
<br/>    #单标签，在尾部加/，表示换行
&nbsp    #等价于空格，因为在HTML中多余空格会被处理掉，所以需要使用&nbsp来完成空格效果

# 文字类
<font face="" color="" size="">这里是文字内容</font>
# font内为文字内容，属性常用的有face-字体，color-字体颜色，size-字体大小
<h1>这里是标题</h1>
# 其中数字可以为1~6，分别为不同字号的标题格式，数字越小字体越大，自带换行
<i>这里为斜体</i>
<b>这里为粗体</b>
<strong>也是粗体，但是表示强调，在搜索时这里的内容会占较高的优先级</strong>
<em>这段为斜体，表示内容不同于其他内容有部分强调的意思</em>
<p align="">段落内容，在结束时会自带换行，而且行距也有所不同，align属性规定对齐方式</p>
<span>无格式的行内标记，与div盒有点像，其中的文字格式要通过样式去规定</span>

# 图片
<img src="url" alt="" width="" height="" />
# 图片标签为单标签，因为不需要文字内容，属性中src为图片的来源，可以使用网络图片，也可以使用路径导入本地图片，alt为图片加载错误时用于替代的文字信息，width与height分别对应宽度和高度，一般情况下只设置一个即可，会默认按比例调整，如果都自定义可能导致图像失真

# 超链接
<a href="url" target="_blank">这是页面显示的内容</a>
# href属性为目标地址，即点击后会跳转到那个页面，target规定了跳转的方式，默认为刷新本页，设为_blank以后则在新页面中进入

# 表格
<table>
    <thead>
        <th>标题一</th>
        <th>标题二</th>
    </thead>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>
<!--
<table border="", cellspacing="" cellpadding="" bgcolor="" width="" height=""></table>
 其中，border为表格边界的宽度，cellspacing为表格中格子之间的距离，cellpadding指表格中内容与格子边界的距离，bgcolor为格子的背景颜色，width为表格宽度，height为表格高度
<tr height="" align="" bgcolor=""></tr>
tr为行标签，因此没有width，因为width与表宽相同，但是高度可以自定，align可以指定内容对齐方式，bgcolor为整行的背景颜色，设置时会覆盖表在此处的颜色
<td width="" height="" bgcolor="" align="" valign="" rowspan="" colspan="">
align指定水平对齐方式，valign指定垂直对齐方式,rowspan指定该格子占据的行数，colspan指定占据的列数，常用来合并单元格

表中可以嵌套表格，可以以此来实现模拟边框（两个表的bgcolor不同）
-->

# 表单
# 文本框
<input type="text" value="" id="" maxlength="" />
value为默认的内容，maxlength为文本框允许输入的最大字符串

# 密码框
<input type="password value="" />

# 按钮
<button onclick="alert('弹框');">点击此处</button>
<input type="button" value="点击此处" onclick="alert('弹框');" />
# 其中，onclick调用函数，后边的分号从语法角度讲最好有，再就是两种用法按钮内容需要注意一个在标签内，一个在属性中

# 单选框
<input type="radio" name="这里需要一致才能保证是一组的不同选项" checked="" />选项一
<input type="radio" name="这里需要一致才能保证是一组的不同选项" />选项二
# checked为默认选中，如果都用checked则最后定义的默认被选

# 多选框
<input type="checkbox" value="">情况一
<input type="checkbox" value="">情况二
<input type="checkbox" value="">情况三

# 下拉框
<select>
    <option value="">选项一</option>
    <option value="">选项二</option>
    <option value="">选项三</option>
</select>

# 文本域
<textarea cols="50" rows="10">文本域，可换行</textarea>

# 提交表单，重置表单
<form id="" action="" method="post">
    <input type="text" value="hello,world" />
    <input type="reset" value="重置" />
    <input type="submit" value="提交" />
</form>

# 重置会将表单内容重置为默认值，action为提交时所作的操作，method指以何种方式提交，get提交的数据量小，且不安全，一般推荐post

# 图片
<input type="image" scr="">

# 水平线
<hr align="center" width="" size=""/>

# 有序列表与无序列表
<ol>
    <li></li>
</ol>

<ul>
    <li></li>
</ul>
# 有序列表会自动在每个li前加上序号，无序则为圆点