HTML5标签与属性

最新推荐文章于 2022-11-28 22:50:53 发布

macycle

最新推荐文章于 2022-11-28 22:50:53 发布

阅读量223

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/weixin_43238567/article/details/107142869

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一标签与属性

1 全局属性

*   class    类选择器
*   id    id选择器
*   contenteditable    表示能够被编辑
*   hidden    能够使被改标签包含的内容隐藏
*   style    这个style是html的属性，与css的style标签不一样，而且它的优先级大于css，它的书写格式与css一样。
*   tabindex     用来控制按住tab键来控制foucs的顺序，其中0代表最后一个被选中，-1代表不被tab选中，大于1则按顺序访问。
*   title    用于鼠标移上去显示标题
复制代码

2 内容标签

*   ol+li   orderList---listItem
*   ul+li   unorderList---listItem
*   dl+dt+dd    descriptionList---descriptionTerm----descriptionData
*   pre    如果想保留空格、回车、tab，则需要用到该元素
*   code    用于在网页中展示代码，使代码格式风格良好
*   em    用于格式上面强调的样式
复制代码

二标签小记

1 a标签

注意事项

在vscode编写页面的时候，不要双击打开页面，而是要打开终端，全局安装http-server，该插件用于创建一个服务器，让页面在服务器中输入网址即可访问。
将网页以服务器方式打开的方法：http-server -c-1 ；生成的网址在服务器中打开即可。
复制代码

属性

href

-网址类型（外链）
1. https://google.com  
2. //google.com  在浏览器要开启preserve.log，这样的话，服务器就会自动的帮我们去寻找具体的服务器地址，而不会因为协议写错而找不到。

-路径（本地）   
1. /a/b/c    /指的是绝对路径，但是开启http-server服务时，这个/代表的根路径指的是当前开启服务器的文件夹为根路径。（这个时候双击打开，/的根路径就不是以文件夹为根路径了）
2. a/b/c.html   省去/，效果也是等同于/a/b/c.html
3. .index.html  .代表当前目录，基于当前目录寻找index.html

-伪协议
1. javascript：代码；    执行代码；
2. javascript：#；   执行代码并刷新网页
3. javascript：；    什么都不做，而且不刷新网页
4. #xxx    在页面内跳转到id为xxx的元素上（不能是class选择器）  
5.mailto:xxx.@gmail.com    发邮件给xxx，会激活邮箱选择窗口
6.tel：12345    唤起手机拨号盘，并且拨打电话
复制代码

target

_self   表示在当前页面打开新链接（默认）
—blank    表示在空白页面打开链接
_parent    表示在当前页面的所在的iframe的上一层打开
_top    表示在当前页面所在iframe的最上面打开
复制代码

代码示例
<body>
<a src="//google.com" target="xxx">google</a>
<a src="//baidu.com" target="xxx">baidu</a>

<iframe style="border:none;width:300px;height:300px" src="" name="xxx">
</iframe>
</body>

google和baidu都指定要在target为xxx的页面打开，而iframe指定的页面的名字就是xxx，因此无论点击google还是baidu，页面都只能同时出现一个。
复制代码

download

a标签的download属性并不是打开页面，而是下载页面。
而且不是所有的浏览器都支持，尤其是手机浏览器可能不支持。
复制代码

用于指定当前文档与被链接文档的关系
复制代码

作用

跳转外部页面
跳转内部锚点
条咋混到邮箱或者电话等

2 table标签

3 form标签

作用

发get或post请求，然后刷新页面

属性

action

表单的必要属性，指定表单内数据提交的网页
复制代码

method

用于指定表单提交数据的方式，默认为get请求方式
复制代码

autocomplete

当form添加该属性的时候，点击控件的时候，表单会自动提示。
复制代码

target

指定表单在哪个页面刷新内容，比如_blank以及xxx，（xxx）是iframe的name属性值，会跳转到iframe指定的页面。
复制代码

4 input标签

作用

让用户输入内容
复制代码

属性

- 类型：button、checkbox、email、file、hidden、number、password、radio、search、submit、tel、text

- 其他：name、autofocus、checked、diasbled、maxlength、pattern、value、placeholder
复制代码

<form>
    <input type="radio" name="gender"/>男
    <input type="radio" name="gender"/>女
    
    - 当input的name相同的时候，表示他们是同一组的，且当类型为radio时，只能选中一个，如果没有name属性，则两个可以同时选
    
    
    <input type="ckeckbox" name="hobby" />唱歌
    <input type="ckeckbox" name="hobby" />跳舞
    <input type="ckeckbox" name="hobby" />rap
    <input type="ckeckbox" name="hobby" />篮球
    
    - 类型为ckeckbox时，由于ckeckbox是可以多选的，当空间拥有相同的name属性时，表明他们是同一组的，在提交的时候，是放在同一个数组的。
    
    
    <input type="file" />
    <input type="file" multiple />
    
    - 默认情况下，选择文件只能选中一个，如果要选择多个文件，需要添加multiple属性
    
    
    <input type="hidden"/>
    
    - 看不见该控件，一般用于提交用户的隐私信息
</form>
复制代码

5 select标签

<select>
    <option value="1">星期一</option>
    <option value="2">星期二</option>
    <option value="3">星期三</option>
    <option value="4">星期四</option>
</select>

作者：macycle
链接：https://juejin.im/post/5eec606be51d45741c542e8d
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。