html基础

最新推荐文章于 2022-03-07 17:07:36 发布

Lemon

最新推荐文章于 2022-03-07 17:07:36 发布

阅读量196

点赞数 1

分类专栏：学习

本文链接：https://blog.csdn.net/weixin_43314846/article/details/96428892

版权

学习专栏收录该内容

80 篇文章 0 订阅

订阅专栏

1. webstorm快捷键：
	alt+f2：选择浏览器浏览
	ctrl+d：复制前一行
	ctrl+shift+/：注释
	ul>li*4+tab：生成一个ul且里面包含四个li
	div.test：生成一个div标签且其class="test"
	Lorem+tab：webstorm中的测试文字
	按住ctrl,鼠标移动到路径中任意一部分分路径，若变蓝且可点击，则路径正确，若不可点击，则路径错误
2. 其他快捷键
	shift+空格：切换全角半角

html基础

html结构

<html>
	<header>
		<title></title>
	</header>
	<body>
	</body>
</html>

单双标签

1. 单标签

标签	描述
`<meta charset=" "/>`	规定该html的字符。用`charset=" "`来设置。	`charset`取值：`UTF-8`：国际通用；`gbk`：国标。`UTF-8`可识别的字符比`gbk`多，特别是符号
`<img src="图片路径 " alt="图片描述" width="宽" height="高" title=“图片标题 ”/>`	行内块标签
`<br>`	换行

① `<img alt=" "/>`中alt属性的作用

（1）当鼠标放到图片上的时候，会出现alt后的内容（该作用和img中的title属性作用相同）

（2）当图片未在浏览器显示时，会用alt后的文字代替图片

（3）当在网页中搜索关键字搜索图片时，会与alt后的内容匹配

2. 双标签

标签	描述
`<html></html>`
`<head></head>`
`<title></title>`
`<body></body>`
`<p></p>`	块标签
`h1~h6`	从1~6字体越来越小。为了优化，一般只写一对`<h1></h1>`在搜索时若有两个标题类文字，则不能确定主题
`<a href=" " alt=" " target="目标窗口" ></a>`	href为链接地址。target取值可以有两个：`_blank`(新窗口打开链接) ； `_parent`(在原窗口打开链接)
`<hr></hr>`	水平线；可设置宽度
`<b></b>`	加粗
`<i></i>`	斜体
`<u></u>`	下划线（h5中已pass掉）
`<strong></strong>`	加粗
`<em></em>`	斜体
`<del></del>`	删除线
`<sub></sub>`	下标
`<sup></sup>`	上标
`<big></big>`	比正常字体大点(h5中已pass掉)
`<small></small>`	比正常字体小点
`<pre></pre>`	在工程中写什么格式，页面就显示什么格式	块标签
`<a href="mailto:邮箱地址"></a>`	发送邮件的一种方式。邮件地址是收件人的地址。点击变迁中的字后跳转到windows自带的一个可发送邮箱的地方（只能跳转到windows自带的，且前提是电脑装了该邮箱）

① `<a></a>` 锚记

(1) 跳转到相同页面的不同位置

<a href="#test"></a>与<a id="test"></a>匹配使用：当点击标签<a href="#test"></a>内的文字时，会跳转到当前页面的id="test"标签处

（2）跳转到不同页面的不同位置

<a href="文件名#test"></a>与<a id="test"></a>匹配使用：当点击<a href="文件名#test"></a>内的文字时，会跳转到文件名指示的文件中的id="test"标签处

一些注意事项

1. 设置图片宽高时：
	① %：当页面大小变化时，或者父标签变化时，图片宽高会变化
	② px：设置多大就是多大，与页面大小无关，即页面伸缩时，图片宽高不变。
3. 给图片加超链接，可以用一个a标签包起来
4. 常用的图片格式：.jpg  .png  .gif  .webp
	小的动图用gif
	图片像素比较高、较鲜艳时用jpg
	一般做背景图片用png
	webp格式的图片只有网页可以解析（手机端不可）

列表

1. 无序列表

描述：没有序号的列表，但是前面有标记，用`type`属性设置，
它的取值有：disc(实心圆)、circle（空心圆） 、square(小方块)

<ul>
	<li></li>
</ul>

2. 有序列表

描述：
	有序号的列表。用`type`属性设置以字符还是数字来进行排序（取值：1、A、a、I、i）；用`start`属性设置第一个标记是从第几个字符/数字开始的

<ol>
	<li></li>
</ol>

3. 自定义列表

描述：
	该列表中的`dt`标签是给`dd`中内容的定义。
	`dd`标签中包含着具体内容。
	在h5之前，`dt`数量只能有一个，而`dd`数量可以有多个

	<dt>
		<dd></dd>
		<dd></dd>
	</dt>

表格

:) 浏览器会自动给表格加上`<tbody></tbody>`

在这里插入图片描述

结构

tr为行，td为行内单元格
<th></th>代表表头第一行的单元格，特点：在单元格内加粗且居中，一般写在第一行。
一个<th></th>占据一个单元格的大小
<td></td>有默认padding,在给table设置cellpadding时，不是叠加，而是将设置的值当做最新的padding值

	<table>
		<caption>表格的标题</caption>
		<tr>
			<td></td> <!--<th></th>-->
		</tr>
	</table>

表格属性

属性	描述
`border`	边框线
`width`	宽度
`bgcolor`	背景色
`cellpadding`	单元格里面的字和单元格边框的距离
`cellspacing`	单元格之间的距离

`<td>`属性

属性名	描述
colspan	跨列（合并列）
rowspan	跨行（合并行）

表单

格式

提交的方式有post/get

<form action="将form内容提交的目标地址" method="提交的方式">
</form>

表单相关标签

:) 1. 常见属性：
		min(最小值)  max(最大值)  maxlength(最大长度)  value(默认文字)
		size(可见宽度) requied(必填项)  placeholder(提示信息)
	其中size和maxlength是任何类型的文本框都有的，
	max和min是type为number特有的属性,若想给普通文本框设置可以通过js
	2. sumbmit 和reset按钮有默认文字（分别是提交和重置），若想重置，可给value设置值

标签	描述
`<input type="text" />`	文本框
`<input type="password" />`	密码框
`<input type="radio">`	单选框，用name相同来控制只选择一个
`<input type="checkbox"/>`	复选框
`<input type="number"/>`	填写数值类型
`<textarea name="" cols="" rows="" style="resize:none"></texarea>`	多行文本框。设置`resize:none`可以限制多行文本框的扩大和缩小
`<input type="submit"/>`	提交按钮
`<input type="button"/>`	确定按钮
`<button></button>`	确定按钮
`<input type="reset"/>`	重置按钮
`<label></label>`

详解`<label></label>`

	<label for="username">昵称：</label><input type="表单类型"  id="username">

注意：
	1. 在上述例子中，label标签的for属性取值和input标签的id属性取值相同，代表两者关联。
	2. 在后端解析代码时，是根据input的id或者name去寻找数据的。label是给屏幕解析器用的。

`<label></label>例子`

注意：
	1. 在该例子中，当点击同意时，与其for取值相等的id对应的input标签被选中。
    2. 若不加`<label></label>`，则只能点击input的单选框才可被选中

	<label for="username">同意</label><input id="username type="radio"/>

复合标签

1. 下拉菜单

结构

<select>
	<option value=" "   selected  disabled>选项值</option>
</select>

`option`属性

属性	描述
`value`	涉及到js内容（前后端交互时使用）
`selected`	添加该元素的`option`标签默认被选中（当打开浏览器时）
`disabled`	禁用选项（即在页面上不可以选择该选项）

2. 下拉列表

结构

<select multiple size=" ">
	<option value=" "   selected  disabled>选项值</option>
</select>

`select`属性

属性	描述
`multiple`	多行选择，该属性和size属性共同来控制显示几行。若不设置size属性，则所有选项全部显示。必须！！！
`size`	用来规定显示几行，若size="1"且无multip，则与下拉菜单相同；但若有multiple,则是只显示一行的下拉列表

3. 预定义控件

在input中输入内容可以对option进行筛选，若没有输入，则点击文本框时展示全部选项内容。list后的内容必须和id后面的内容相同

结构

	<input list=" ..."/>
	<datalist id="..">
			<option value="...">
	</datalist>

4. 分组

格式

	<fieldset>
		<legend>个人信息：</legend>
		姓名：<input type="text"><br>
		邮箱：<input type="text"><br>
		生日：<input type="text">
	</fieldset>

图例：
在这里插入图片描述

块级元素、行内元素、行内块元素

注意：
1. 块级元素和行内块元素可以设置宽高，margin的四个方向都可以设置，padding的四个方向也都可以设置
2. 行内元素不可设置宽高，margin的上下方向以及padding的上下方向不可设置。但其左右方向可以设置大小
3. 行内块元素既有行内元素的特点，也有块级元素的特点
4. 水平margin可以叠加，竖直margin不可叠加（取最大）