HTML学习

标签学习

基础标签

<h1></h1> <h2></h2>表示标题  有末尾标签 
<p></p> 表示段落 后面默认空白换行 有末尾标签
<br>换行符号 没有尾标签
<em></em>强调文本
<strong></strong>加粗字体
<sub></sub> <sup></sup>上标和下标
<b></b>加粗字体
<mark></mark>高亮字体

块级标签

div h1~h6 
blockquote与cite属性一起使用表示内容来源于某个网站
ol ul li 为下拉菜单的一组
dl dt dd为列表的一组
pre 预格式化的文本，内容输出在浏览器上不进行缩进和压缩

特点：总是在新的一行上开始，高度、行高、以及底部和边距都是可控的。宽度默认为100%
功能：用于搭建页面的架构、布局、承载内容

行内元素

span a b br
code em i img 
input label
select textarea
特点：和其他元素都在一行上。高、行高、顶、底不可变 
功能：用于加强内容显示，控制细节

描述性标签

header footer nav video article section
让代码更加易读，有助于浏览器优化

文本输入框

input 单标签 根据不同的type属性可以有不同输入字段。比如文本、复选框、密码、单选、按钮等等。
placeholder属性可以提高描述性字段。适用于text、search、url、telephone、email、password

单选框和多选框

input的type属性赋为radio 每个radio外要嵌套label 并且关联name属性
input的type属性赋为checkbox
单选和多选的默认选中状态用checked属性

表单

form可以包含多个表单元素 action属性的值指定表单提交到服务器的地址
通过submit进行表单提交
为表单元素添加required属性可以指定为必填项

style标签

可以为全局的标签类型设置样式
使用class或者id选择设置样式加. 或者#
通过font-size设置文本字体大小常用单位有px,%,rem
通过font-family设置字体样式(可以通过link引入外部字体)
设置两种字体，一种失效时会降级到下一种
通过width height为图片设置大小
通过border添加边框
border-style（none、dotted、dashed、solid、double、groove、ridge、inset、outset、hidden）
border-color为边框设置颜色
border-width设置边框宽度
border-radius为边框添加圆角(其中为50%时为圆形)
当class样式和id样式冲突时优先应用id
padding内边距（文本与边框的距离） margin 外边距（边框与边框的距离）
负外边距设置负值会变得更大
padding: 20px 40px 20px 40px表示上 右 下 左的内边距
margin： 20px 30px 20px 40px 表示上 右 下 左的外边距
通过[type= 'checkbox']{}属性选择器也可以进行样式绑定
通过var(custom-property,value)可以更改多个元素样式(设置value值当不生效时会显示默认)
css变量可以继承 ：root为根选择器在其中声明会影响全局
在某个单独区域重写该变量就可以变了设置的值

样式的优先级

最近的祖先样式比其他祖先样式优先级高(后声明的优先)
直接样式比祖先样式优先级高
内联样式>id>class=属性选择器>标签选择器
使用！important声明的优先级最高

其他

注释 <!-- --!>
添加图片 img为单标签 src图片地址 alt 图片无法加载时的替代文本(可以赋为空，当加载失败时也会隐藏损坏图标)
添加链接  a 有末尾标签
使用ul 嵌套li可以实现无序列表
使用ol 嵌套li可以实现有序列表 ol的start属性可以指定开始序号

注： 1、元素间嵌套。 块级可以嵌套块级、行级。但是行级不能嵌套块级。像h1~h6、p、dt这些只能包含行级 2、可以把链接嵌套在图片外实现点击图片跳转 3、a标签可以实现网页内不同区域的跳转。href=“#about”就会跳转到id为about的区域 4、只显示链接样式 不跳转 可以为href属性赋为# 5、html的标签有id属性通过css和js来控制标签细节 6、只有body区域内的元素才会在浏览器中显示出来 7、子元素会继承父元素的样式特性 8、为了提高兼容性可以在前方声明默认样式