0%

HTML-基础教学

HTML

根标签, html文件中是唯一的 结构化标签, 设置浏览器特性 结构化标签, 客户端展示

html

告诉搜索引擎使用的语言, SEO搜索引擎优化时有用

设置字符集

设置关键字 设置标题

body

常用标签

标签名 标签作用
h1 - h6 标题标签(header), h1 - h6 逐渐减小
strong 加粗标签, 但一般不使用(css与html分离)
em 斜体标签, 但一般不使用(css与html分离)
del 删除标签(delete), 一般用于价格划线, 但一般不使用, 而是text-decoration: line-through 代替
span 容器标签(跨度), 一行展示, 捆绑操作
address 地址标签, 等价于p + em标签
div 容器标签(division), 独行展示, 捆绑操作
p 段落标签(paragraph), 让p标签内的文字成段展示

列表标签

有序标签
<ol>
小写字母<ol type="a"> ;
大写字母 <ol type="A"> ;
罗马数字小写 <ol type="i"> ;
罗马数字大写 <ol type="I">;
排列顺序 <ol reversed="reversed">
初始索引: <ol start="2">

无序标签
<ul>
默认: 实心圆 <ul type="discircle">;
空心圆 <ul type="circle">;
方块 <ul type="square">
列表标签 <li>

图片标签

<img src="" alt="图片占位符, 图片炸了之后显示" title="图片显示符">

超链接标签

anchor 锚点 最开始的作用是前往页面的某个位置
作用1、超链接
<a href="" target="\_blank"> target=”_blank” 新标签页打开页面
作用2、打电话
<a href="tel:12345678912">
作用3、发邮件
<a href="mailto:a@b.c">
作用4、协议限定符
<a href="javascript:alert('emmm')">click me </a>

表单标签

1
2
3
4
5
6
<form method="get" action="https://www.baidu.com"> 
<input type="text" name="username">
<input type="password">
<input type="radio" name="selection" value="1">
<input type="checkbox">
</form>

单标签

换行 <br>
水平线 <hr>

html编码

空格 &nbsp; (non-breaking space 不间断空格)
小于符 < (less than)
大于符 > (greater than)

行级元素和块级元素

实际此为css特性, 可以用css修改改变
display: inline / block / inline-block

行级元素/内联元素

特点: 内容决定元素所占位置, 不可以通过css改变宽高
常见元素: span, strong, del, em, h1

块级元素

特点: 可以独占一行, 可以通过css改变宽高
常见元素: div, p, li, ul, ol, form, address

行级块元素

特点: 内容决定元素所占位置, 可以通过css改宽高
常见元素: img
补充: 凡是有inline属性的元素, 都有文字特性, 所以会被分割, 即使是图片也如此

相关文档和视频

2021权威「HTML+CSS」零基础入门精英课【渡一教育】