HTML 基础笔记
文章目录
快捷操作
- 在vscode中,按“!”再按下回车,html起手式就完成了。
- 按“table+” enter 就可以快捷生成table的基本样式
章节标签&&全局属性
章节标签
- h1~h6 标题
- section 章节
- p 段落
- footer 常常用于版权声明;格式为:
<footer>©版权所有zxh</footer>
- main 主要内容:位于header和footer之间
- aside 旁支内容:用于导航或者参考资料文献
- div 划分
全局属性
- class 分类 用来标记一个类
<div class="midddle">test</div>
<style>
.middle{
background:black;
}
</style>
- contenteditable 用户是否可编辑
<div class="middle" contenteditable>
这个div包裹的内容用户可以自己编辑
</div>
- 让style显示并且可以编辑
<style contenteditable>
style{
display:block;
border:1px solid red;
}
.middle{
background:black;
}
</style>
- hidden 隐藏标签
- id 标记,不到万不得以不要使用id,因为当两个id一样时,并不会报错
- Tabindex tab访问顺序
页面中所有可以交互的地方都可以用tab键访问,因为有些时候没有鼠标
tabindex=1
tabindex=2
tabindex=0 页面最后访问
tabindex=-1 tab永远不会访问到这里 - title
默认样式&&CSS reset
html具有自带样式,但现在以及非常落后,所以我们每次都重置,称之为css reset
*{
margin:0;
padding:0
box-sizing:border-box;
}
ol,ul{
list-style:none;
}
a{
text-decoration:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}
常用的内容标签
- ol 有序列表
- ul 无序列表
- dl 描述列表
- pre 其包含的内容空格和enter将会保留
- code 里的字体是等宽的,里面包含代码
- hr 水平分割线
- br 换行
- a 超连接
<a href="http://qq.com" target="_blank">QQ</a>
- em 强调 语气强调
- strong 本身很重要
- quote 引用
- blockquote 换行引用,块级引用
HTML重要标签
a
属性
- href 链接,地址
- target 指定窗口打开
href取值
- 网址
http://google.com
https://google.com
//google.com - 路径
/a/b/c
index.html
./index.html - 伪协议
<a href="javascript:alert(1);">javascript为协议</a>
<a href="mailto:2459522339@qq.com">邮箱伪协议</a>
<a href="tel:19898078992">打电话给我</a>
- id
<div id="xxx">xx</div>
<a href="#xxx" target="_blank"></a>
a的target取值
- _blank 空的新窗口打开
- _top 顶级窗口打开
- _parent 父级窗口打开
- _self 当前所在窗口打开
tableb 标签
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th></th>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
img标签
作用
发出一个get请求,展示一张图片
属性
- alt 可选的,代替错误显示
<img src="dog.jpg" alt="一只狗仔" >
- height 只写高度,宽度会自适应
- width 同上
事件
- onload 是否加载成功
- onerror 加载失败
响应式
<style>
img{
max-width:100%;
}
</style>
form标签 表单
作用
发get或者post强求,然后刷新页面
action用来控制请求哪个页面
method 控制使用get还是post请求
<form action="/xxx" method="POST">
<input type="text"/>
<input type="submit"/>
</form>
form的属性
- autocomplete:off|on;控制是否可以自动填充
- target="_blank" 告诉浏览器表单提交到哪个页面
form的属性
- onsubmit
当用户点击提交时触发的事件
<input type="submit" value="点击"/>
<button type="submit">点击</button>
input和button有什么区别呢?
区别是button中还可以添加其他标签,而在form中必须有一个type=submit的按钮,因为只有submit才能提交表单.
input标签
<input type="text| color| password| radio">
- password 输入的数据不予显示,以*或者小圆点代替
- radio 控制单选
<input name=gender type="radio"/>男
<input name=gender type="radio"/>女
- checkbox 控制多选
<input name=hobby type="checkbox"/>唱
<input name=hobby type="checkbox"/>跳
<input name=hobby type="checkbox"/>rap
- file 选择文件
<input type="file" multiple />multiple控制多选
textarea 多行文本
<textarea style="resize:none;width:50%;height=300px;"></textarea>
select
<select >
<option value="1">周一</option>
<option value="2">周二</option>
<option value="">-请选择-</option>默认
</select>
验证器
当用户未填内容时,就无法提交表单
<input type="text" required>
注意
- 一般不监听input的click事件
- form里面的input必须需要name
- form里要放一个type="submit"才能触发submit事件
- 一般一个网页只有一个h1
- 利用正则表达式删除[1][2]
vscode 编辑->替换->使用正则表达式(alt+R)->[\d+] 替换为空 - 一般上传的图片不能超过300k
- vscode输入meta:vp 就会自动生成响应式