HTML常用标签

最新推荐文章于 2022-07-26 17:07:39 发布

King_960725

最新推荐文章于 2022-07-26 17:07:39 发布

阅读量87

点赞数

分类专栏： HTML HTML_CSS学习日志文章标签： HTML

本文链接：https://blog.csdn.net/weixin_42566993/article/details/97288032

版权

HTML_CSS学习日志同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

笔记放在Github上，点击访问下载

块级元素可以包含其他标签
行内元素不可以放置块级元素

超链接a：即进行跳转

使用相对路径跳转并在新选项卡中打开，target值默认为_self时在当前选项卡打开
<a href="../day01/2-element.html" target="_blank">跳转1</a>
使用本地绝对路径跳转,在文件路径前面加file:///
<a href="file:///C:\Users\PC-ASUS\Desktop\html_css\day01\2-element.html">跳转2</a>
使用网络的绝对路径跳转
<a href="https://www.baidu.com">百度一下</a>
邮箱跳转，前提是本地安装了邮箱
<a href="mailto:watermelon0811@163.com">发送邮箱</a>
锚点跳转，跳转到相应的id值处,href是一个id
<a href="#id值">回到顶部</a>

图片img：

src是图片路径，可以是绝对路径也可以是相对路径，alt是图片加载不出来的提示信息
<img src="./images/index.png" width="250px" height="180px" />

表格：表格边框合并：border-collapse:collapse;

border边框宽度,单位px
tr代表一行， td代表单元格，一行中的某一列
没有写tbody，浏览器默认会把tr加在tbody里
cellpadding-设定内容与单元格之间的距离
cellspacing-设定单元格与单元格之间的距离
align-表格在文档中的对齐方式，有center,left,right
caption-表格的标题信息
colspan-跨列数 rowspan-跨行数
colgroup-定义一个表格中的列，放在caption后面，其他元素之前,span属性表示跨列数

<colgroup>
	<!-- 第1列没做处理 -->
	<col />
	<!-- 接下来的3列当做同一列处理 -->
	<col span="3" style="background-color: pink" />
</colgroup>

HTML新标签：
为了兼容性：section, article, aside, footer, header, nav, hgroup { display:block; }
/*块级显示，将其他元素转换为块级元素*/

article：代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容。相当于一篇文章。
section：相当于一篇文章的每一章节。
figure:figure元素是一种元素的组合，带有可选标题。标题放在figcaption中。
details:可展开，默认open值为false，不展开内容，可设为true。summary是details中点击的对象，没有summary默认是 详细信息。

表单：

搜索表单：
action 表单提交的地址
默认get:./4-h5.html?search=123&search1=234 ，问号?后面的是查询字符串，使用&拼接。
post:./4-h5.html post方式的参数在请求体
multipart/form-data 文件上传控件

<form action="./4-h5.html" method="get" enctype="application/x-www-form-urlencoded">
	<input type="text" name="search">
	<button>搜索</button>
</form>

登录表单：

<form action="./4-h5.html">
	<div>
		<!-- label-标签，用于表单前加字，描述该表单 -->
		<label>用户名</label>
		<!-- placeholder 占位符 提示用户，但不提交 -->
		<input type="text" name="username" placeholder="请输入用户名" />
	</div>
	<div>
		<label>密码</label>
		<input type="password" name="password" placeholder="请输入密码" />
	</div>
	<div>
		<input type="submit" name="" value="登录" />
		<input type="reset" name="" value="注销" />
	</div>
</form>

注册页面：

label表单组件：label 用于表示某一表单组件的标题。for 与为设定标题的表单组件的ID值一致。
filedset:用于在一个web表单中对多个控件和标签进行分组。fieldset的标题由<legend>标签提供。
input表单组件
input中常用的的布尔属性：autofocus:自动聚焦；autocomplete:自动补全；required:必填项；disabled:禁用，不提交数据；readonly:不可修改只读，提交数据；checked:默认选中。

type属性：
1. text：单行文本框
2. password：密码框
3. radio：单选按钮，使用value来描述该组件提交的值。eg:性别选择，如果想设置点击男就能选择，可以使用label,在input里面增加id="male",然后label中for="male"。checked默认选中。
4. checkbox：复选框，用法和radio类似。
5. submit,reset:提交和重置按钮。
6. date:年月日；datetime-local:年月日+时间；time:时间；month：年月；week：年周。
7. 数字：number；颜色color；邮箱：email；URL：url;电话：tel;搜索：search
8. 滑块：range。 min="0" max="100" step="10" 其中step为步长。

select表单组件：表示下拉列表或列表

optgroup用于表示option的选项组，常包含在select中。
option用于表示选项，常包含在select，optgroup或者datalist中，disabled表示禁用，value用于提交给服务器，selected默认选中。

datalist:输入框的选项列表，其值通过option作为其子元素而存在。autocomplete="off"关闭自动补全。input里面有list属性，用来存放datalist的id值。

<input type="text" list="datasource" name="datalist" />
<datalist id="datasource">
	<option value="hello">hello</option>
	<option value="world">world</option>
</datalist>

可提交表单的按钮
<input type="submit" value="提交" />
<input type="reset" value="重置">
<input type="image" src="../day02/images/index.png" width="50px" height="30px" alt="图片按钮">
<button>可提交</button>
<button type="submit">可提交</button>
<button type="reset">重置</button>
不可提交的按钮
<button type="button">普通按钮不可提交</button>

文件上传时要使用post,使用文件流进行提交

<form action="#" enctype="multipart/form-data" method="post">
	头像：<input type="file" name="file">
		<button>提交</button>
</form>

texarea表单组件：用于表示多行文本框。

name:该组件的名字，用于提交给后台。
cols:文本框的列数。
rows:文本框的行数。

HTML5新增表单元素

progress:进度条，value为已完成的工作量，max为进度元素一共要完成的工作量。
output：用户动作产生的结果。
meter:规定范围内的数量值。

<!-- 绿色-没有optimum最佳值 -->
<meter value="40" min="0" low="40" high="60" max="100"></meter>
<!-- 黄色-没有optimum最佳值 -->
<meter value="20" min="0" low="40" high="60" max="100"></meter>
<meter value="70" min="0" low="40" high="60" max="100"></meter>
<!-- 红色 optimum小于low时给大于high的值，optimum大于high时给小于low的值 -->
<meter value="70" min="0" low="40" high="60" max="100" optimum="30"></meter>
<meter value="30" min="0" low="40" high="60" max="100" optimum="70"></meter>
<!-- 0<=value<=40绿色，40<value<=60黄色，60<value<=100红色 -->
<meter value="61" min="0" low="40" high="60" max="100" optimum="30"></meter>
<!-- 0<=value<40红色，40<=value<60黄色，60<=value<=100绿色 -->
<meter value="60" min="0" low="40" high="60" max="100" optimum="70"></meter>

外部的form表单信息

<form id="form">
<!-- formnovalidate提交表单时不被验证 -->
<button formaction="2-form.html" formtarget="_blank" formnovalidate>提交到其他地方</button>
</form>
外部的input:<input type="text" name="outinput" form="form" />