HTML入门一
2020-11-27 本文已影响0人
码农修行之路
HTML 标签分类
- 单标签 格式 <标签名 />
- 双标签 格式 <标签名>内容</标签名>
HTML标签关系
- 嵌套（父子）
- 并列（兄弟）
例子：
<!DOCTYPE html><!-- 文档类型 指定使用哪一个html版本 1、2、3、4、XT、5 -->
<html lang="en">
<!-- 标签分类：单标签 和 双标签 -->
<!-- 单标签 格式：<标签名 /> 双标签 格式 <标签名>内容</标签名> -->
<!-- 标签关系：嵌套（父子） 和 并列（兄弟） -->
<head>
<!-- 指定字符集格式 utf-8是最常用的 还有其它gbk（包含全部中文字符，兼容gb2312，支持繁体）、gb2312（简体中文）、big5（繁体中文） -->
<!-- utf-8 包含全世界所有国家需要用到的字符 -->
<meta charset="UTF-8">
<!-- head 和 title 就是嵌套（父子）关系 -->
<title>入门</title>
<style type="text/css">
/*段落首行缩进两个字符*/
p {
text-indent: 2em;
}
</style>
<!-- base标签可以设置页面中所有的链接标签的打开状态 -->
<base target="_blank"/>
</head>
<!-- head 和 body 就是并列（兄弟）关系 -->
<body>
<h1>大标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<p>段落标签</p>
<!-- 水平线 -->
<hr/>
<!-- 换行 -->
<h4>--------班花------</h4>
1、林儿<br/>
2、熳熳<br/>
3、芳儿<br/>
4、花儿<br/>
<div>我是div盒子</div>
<span>我是span盒子</span>
<!-- 水平线 宽度 颜色属性-->
<hr width="200px" color="red" />
<!-- a标签 链接标签 href target属性 -->
<!-- target 属性值 _parent和_self等效 _top将会清除所有被包含的框架 载入整个窗口 _self _blank -->
<a href="http://baidu.com" target="_top">百度一下</a>
<a href="小黄空间.html" target="_top">小黄空间</a>
<a href="#" target="_self">空链接</a>
<!-- href="#id名 定位到的 id名一样" -->
<a href="#personal">跳到个人经历</a>
<!-- 锚点定位 -->
<h4 id="personal">个人经历</h4>
<div> 其实段落 首行缩进</div>
</body>
</html>
注意：如果两个标签之间属于嵌套关系，子元素最好缩进一个tab键的身位，如果是并列关系，最好上下对齐
标签的语义化
语义化其实就是值标签的含义
- 其核心是合适的地方给一个最为合理的标签
语义化标签好处：
- 方便代码的阅读和维护
- 同时让浏览器或网络爬虫更好的解析，从而更好地分析其中的内容
- 具有更好地搜索引擎的优化
- 遵循的原则：先确定语义的HTML 再选择合适的CSS
接下来开始标签的学习：
排版标签
标题：
- <h1-6></h1-6> 六个等级的标签
<h1>大标题</h1><!-- h1尽量少用 -->
<h2>二级标题</h2>
...
<h6>六级标题</h6>
段落：
<p>段落标签 首行缩进可以在样式中添加相关的属性 text-indent:2em; 缩进两个字符空间</p>
水平线：
<hr /> 水平线标签 属于单标签 可以修改其属性值：宽、高、颜色等
换行：
<br /> 换行标签 属于单标签
div、span：
网页布局的两个盒子，没有什么具体的语义
<div>我是div盒子</div>
<span>我是span盒子</span>
文本格式化标签
加粗<strong></strong>、倾斜<em></em>、下划线<ins></ins>、删除线<del></del>
<!--文字加粗 b 和 strong 建议使用strong-->
<p>我是一个段落，<b>文字</b>需要加粗</p>
<p>我是一个段落，<strong>文字</strong>需要加粗</p>
<!--文字倾斜 i 和 em 建议使用em-->
<p>我是一个段落，<i>文字</i>需要倾斜</p>
<p>我是一个段落，<em>文字</em>需要倾斜</p>
<!--文字添加删除线 s 和 del 建议使用del-->
<p>我是一个段落，<del>文字</del>需要添加删除线</p>
<p>我是一个段落，<s>文字</s>需要添加删除线</p>
<!--文字添加下划线 ins 和 u标签 建议使用ins-->
<p>我是一个段落，<ins>文字</ins>需要添加下划线</p>
<p>我是一个段落，<u>文字</u>需要添加下划线</p>
标签属性
- 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
- 属性不分先后 标签名与属性、属性与属性之间均以空格分隔开
- 任何标签的属性都有默认值 省略该属性则取默认值
- 属性采用键值对的形式 key = "value" 的格式
<!-- 水平线 宽度 颜色属性-->
<hr width="200px" color="red" />
图像标签
- 图片标签<img src="德华.jpg" /> src是指定图像文件的路径和文件名 是img标签的必须属性
- 其它一些属性 alt 图像不显示的替换文本描述；title 鼠标悬停时显示的内容；width height 图片的宽高（XT版本不支持% 百分比 单位像素）；border 边框
- 一般图片的宽高设置一个就可以 会自动等比例缩放的
<!-- 单标签 -->
<img src="路径" alt="图片路径出错" title="鼠标悬停文本" border="10" width="200"/>
链接标签
- <a href="url地址"></a> 标签
- 其属性 target 用于指定链接页面发开的方式 取值self（自身页面打开） blank（新空白页面打开）
- href 可以指定内部和外部链接
- 当没有确定的链接目标时 通常链接标签的href属性值定义为“#”（href="#"）表示该链接暂时为空链接
- 不仅仅可以创建文本超链接 在网页中各种网页元素 如图像、视频、音频、表格等都可以添加超链接
<!-- a标签 链接标签 href target属性 -->
<!-- target 属性值 _parent和_self等效 _top将会清除所有被包含的框架 载入整个窗口 _self _blank -->
<a href="http://baidu.com" target="_top">百度一下</a>
<a href="小黄空间.html" target="_top">小黄空间</a>
<a href="#" target="_self">空链接</a>
锚点定位：
<!-- href="#id名 定位到的 id名一样" -->
<a href="#personal">跳到个人经历</a>
<!-- 锚点定位 -->
<h4 id="personal">个人经历</h4>
base标签：
- base标签可以设置整体链接打开状态
<!-- base标签可以设置页面中所有的链接标签的打开状态 -->
<base target="_blank"/>
特殊字符标签
- 特殊字符标签
空格
大于号 >
小于号 <
乘号 ×
除号 ÷
摄氏度 °
人民币 >
正负号 >
版权 >
商标 ®
和号 &
平方根(平方2) ²
等
<div> 其实段落 首行缩进</div>
注释标签
- 注释标签 在页面运行中不显示
<!-- 注释内容 -->
相对路径、绝对路径
<!-- 相对路径 相对于当前html文件路径 操作展示其它文件的路径-->
<!-- ../ 上一级 / 下一级 -->
<img src="html入门.html"/><!--相对于当前html文件 同一级 只需要输入要展示文件的名称即可 -->
<img src="../html入门.html"/><!--相对于当前html文件 上一级 也就是和当前html文件父目录同一级 ../ -->
<img src="../../html入门.html"/><!--相对于当前html文件 上两级 ../../ -->
<img src="imgs/dd.jpg"/><!--相对于当前html文件 下一级 也就是当前html文件和imgs文件夹同一级-->
<!-- 绝对路径 从当前需要展示的文件的根目录到文件的目录 加上文件名 这就是绝对路径-->
<img src="C:\Users\app\Desktop\html入门.html"/><!--本地路径不建议使用 不同的设备上面路径不同 不方便项目迁移-->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/><!--经常使用的-->
无序列表（ul）
- 没有顺序级别之分，是并列的
<!-- ul标签里面只能添加li标签 li标签中可以添加任意标签 -->
<!-- 无序列表属性 type="disc、circle、square" 表示列表项符号 分别是实心圆、空心圆、实心正方形 -->
<ul type="circle">>
<li>林儿</li>
<li>小熳头</li>
<li>小杨杨</li>
<li>熳熳</li>
</ul>
有序列表（ol）
- 有排列顺序的列表 其各个列表按照一定的顺序排列定义
<!-- ol标签里面只能添加li标签 li标签中可以添加任意标签 -->
<!-- 有序列表的属性 type = "1、a、A、i、I" 表示列表项符号 -->
<ol type="a">>
<li>杰夫·贝佐斯</li>
<li>比尔·盖茨</li>
<li>伯纳德·阿诺特</li>
<li>马克·扎克伯格</li>
</ol>
自定义列表
- 定义列表常用于对术语或名词进行解释和描述 定义列表的列表项前没有任何的项目符号
<!-- dl 定义列表 dt 定义名词 dd 名词解释 -->
<dl>
<dt>上海</dt>
<dd>闵行</dd>
<dd>浦东</dd>
<dd>奉贤</dd>
</dl>
补充：块元素和行内元素
块元素特点：
- 独占一行 排斥其它（包括块和行内）元素
- 其内部可以容乃其它（包括块和行内）元素
行内元素特点： - 可以与其它元素同在一行
- 其内部只可以容乃行内元素
