THML常用标签

div
本身没有任何特殊语义,只是用来划分区块的容器,可以通过添加CSS来设置样式

span
本身没有任何特殊语义,可以使用它来编组元素以达到某种样式意图(通过使用类或者Id属性),spandiv元素很相似,但是div是一个块级元素 span则是行内元素。

a
a元素 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

常用属性

target 属性
_blank 新窗口打开
_self 当前窗口打开
_parent 父窗口打开
_top 根 父窗口打开

download属性
添加之后点击直接下载
是否可下载是根据接受数据的类型判断 或者a标签强制指定

herf属性
a标签跳转页面 get请求

<a herf="qq.com">
错误写法 无法进入网站 只会被当成文件路径

<a herf="//qq.com">
浏览器会默认为当前协议

<a herf="#sdsad">
写锚点会实现页面内的跳转 不发出任何请求

<a herf="?xxx:yyy">
直接加在当前页面的后面 会发起一个get请求

<a herf="JavaScript:;"> 伪协议
点击之后直接运行js代码里面的内容
当js内为空时 什么都不发生

form
表单提交 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。

属性

method:设置请求动词 一般是POST
name:设置第四部分数据的属性

关于提交按钮

form 标签中一定要有一个提交按钮 否则无法提交数据
你可以在input 或者 button 中设置type属性为 submit 来设置 为提交按钮
或者如果form有且只有一个按钮 button 那么就算没有设置type属性也会被默认为提交按钮

input
用于为基于Web的表单创建交互式控件,以便接受来自用户的数据
通过设置type属性改变样式
常用的属性有
text checkbox radio password

checkbox 复选框
<input type="checkbox" name="" id="xxx"><label for="xxx">123</label>

选择框 input中的 id 和 label中的 for 关联 可是实现 点击label中的文本也能选择
两个相关联以后 不管input是是什么属性都可以达到相同的效果
老司机写法: 把input标签放到label里面 就不需要设置id 和for了

radio属性 设置单选框
如果两个单选框 有同一个name的话只有一个能被选中
<label for=""><input name="1" type="radio" value="yes"></label>
<label for=""><input name="1" type="radio" value="no"></label>

select 标签 下拉框
<select name="group" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" disabled>3</option>
<option value="4" selected>4</option>
</select>

name 提交数据用的
disabled 无法被选中
selected 默认被选中
按住ctrl或者shift 可多选

<textarea name="" id="" style="resize: none;width: 100px;height: 100px" cols="30" rows="10">

</textarea>
自定义文本输入框 可自由拉升长宽 但是可以通过css设置固定长宽

button
表示一个可点击的按钮,可以用在表单或文档其它需要使用简单标准按钮的地方
type :submit 为提交按钮

p
表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。另外,<p> 是块级元素。

ul
与li一起使用 表示 无序的列表

ol
与li一起使用 表示有序的列表

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,642评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,314评论 19 139
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,590评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 6,929评论 0 7
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,685评论 32 459