HTML常用标签下

特别注意:每次设置css时记得将:
*{
    margin : 0 ;外边距为0
    padding :0 ; 内边距为0
}
 

a标签
属性:
href :输入网址等,跳转外部页面,内部锚点,和邮箱电话等
网址写://google.com  浏览器会自动跳转到https://google.com
 
 伪协议:
现在使用  javascript:代码;  来创建一个 什么都不做的a标签 
mailto:邮箱地址
tel:电话号码
 
id:可以根据标签上的id,herf设置--》href=#id名字 就可以跳转到对应的标签上
 
target :
_blank :在新的空白页面打开链接
_top :在当前最顶层的区域打开链接
_parent :在当前页面的父级页面打开链接
_self :当前所在的页面打开链接
 
target可以直接将链接网址的网页命名:href="www.baidu.com" target="xxx".
这样打开页面名字就是xxx,以前一些网站会这样设置,让你无法打开多个同样的页面。
 

table标签:只能写三个标签元素
      头:thead   身体:tbody   尾巴:tfoot
三个元素又包括这三个元素: 
      tr:table里面一行    th:(加粗显示)是定义表格里面的表头单元格   td:表示表格中的一个单元格
注意:一般thead里用--》tr+th组合,表示表头元素。其他则用tr+td组合,表示表格元素。
 
相关样式:
table-layout:包含两种 元素 --》auto  、  fixed
auto :让浏览器自动调整表格宽度,主流使用,就是表格中有的字多就宽点,字少的就窄点。
fixed:不管表格中字多字少,尽量让表格同样宽度大小。
 
组合:合并起来就是正常的表格样式,在css里设置。
border-collapse:collapse;表格之间合并
border-spacing:0;表格之间没有空隙
 

img标签:自闭合标签
img每请求一张图片都是get请求。
 
包括属性为:
src:图片的地址
alt :当图片显示不出来时,出现的补救文字提示
width、height :设置图片的宽高,当只设置一项的时候,另外一项是自适应的。
注意:一定不能让图片变形
 
事件有:在js里触发的事件
onload :当图片加载成功后,控制台显示加载成功。
onerror :当图片加载失败后,控制台可以通过在js里设置一个新的src的图片地址,让用户看到好看的404图片加载失败进行补救。
 
响应式:当在css里设置了 img的表格样式是:当在img里设置了宽高,它还是会根据手机或pc自适应调整大小
                 img { max-width :100% }
那么表示这张图片不管在pc端还是在手机端都可以自适应大小 
 

form标签:表单  里面必须要有一个type=“submit”的属性才可以提交
action:控制请求哪个页面,里面有什么,就请求什么,请求发送到后端
method:控制是post还是get请求
autocomplete :有两种选择--》on 、off。当input标签上有name属性时,这个from属性就会给出一些你常用name建议。
target :控制将action里请求提交到哪个页面,哪个页面就刷新。
 
事件:
onsubmit :提交事件,submit默认是提交样式
 
注意区别:<input type="submit"> 和 <button type="submit">提交</button>
input里面是不能有其他东西了,
button里面是可以包含其他标签的,如果button里面什么都不写,那么默认就是submit。
 

input标签:输入框
常用属性type:
text :文本
color:颜色
password : 密码
radio:单选--》如果想要二选一,要有同一个name
checkbox :多选框---》如果想要多选的成为一组,最后生成数组存储那么就要有同一个name。
file :选择文件, 默认只能选一个。如果要选两个就要写上   multiple    就可以选多个文件上传
haddin :隐藏,多用于机器自动提交内容时用,暂时还不懂
 
textarea标签:文本框,可以多行输入文本
默认右下角有个大小拖动框,可以在css里设置 resize:none;  固定大小。然后在设置宽高,就可以设置大小了。
 
select 标签:选择框
里面有个option属性,<option value="1">星期一</option>,value是内部传输的值,星期一是外部给用户选择的值
 
js事件:
onchange :改变事件
onfocus :鼠标聚焦
onblur : 鼠标离开
 
验证器:
HTML5新增功能---》required : 如果放到input框里,用户如果没有写入内容提交时是会提示没有提交
 
 
 
 
posted @ 2021-01-11 23:40  蛰鸣  阅读(34)  评论(0编辑  收藏  举报