目录
一.HTML5基本语法
在VScode中创建文件后缀名.html后输入html,在html:5选项下Tab就会得到html5的基础结构·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
二.HTML5的标签
2.1标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>2.2段落标签
<!-- align 可以设置对齐方式，默认是左对齐 -->
<p align="left">文字左对齐</p>
<p align="center">文字居中对齐</p>
<p align="right">文字右对齐</p>
<p> </p>
<!-- 空格代码: 一个空格约占半个字左右 -->2.3换行标签（单标签）
换行标签<br />
换行标签<br />2.4分割线（单标签）
<!--
这个是我们学习的第二个单标签：水平分割线，横线标签 hr 默认的是通栏的，默认居中
-->
<!-- 线的宽度 width, 线的颜色 color， 线的大小 size -->
<hr width="600" color="red" size="6" />2.5字体标签
<!-- 字体标签 font 双标签 color 文字的颜色，size 是文字的大小 -->
<font color="red" size="7">我们要成为优秀的工程师</font>
<!--
注意：最大的字号只能到7，后面css就可以解决这个局限性。-->2.6链接标签
<!--
我们的链接分为:网址链接，本地链接，空链接
-->
<!-- 链接的标签 a 标签 下面给大家演示的网址链接 -->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.jd.com">京东</a>
<a href="http://www.taobao.com">淘宝</a>
<!-- 空链接 # 占位使用的-->
<a href="#">空链接</a>
<!-- 扩展一个工作经验，我们在工作里面还会看到 三个 ### -->
<a href="###">空链接 ### 规范</a>
<!-- 空链接就是为了占位使用的，给3个### 为了解决返回顶部的问题 -->
<!-- 本地链接 href属性值填写自己写过的文件-->
<a href="02-字体标签.html">本地链接</a>我们在点击超链接时总是会将原页面覆盖，有没有一种方法可以弹出新窗口，保留原页面
<!-- target = "_blank" 弹出新窗口 -->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.jd.com" target="_blank">京东</a>
<a href="http://www.taobao.com" target="_blank">淘宝</a>加上 target="_blank" 之后的确是解决了弹出新窗口的问题，但是每个超链接都需要来上这么一句，显得代码冗余，现在就需要更好的解决方法
<base target="_blank"/>
</head>
<!--
上大招优化代码，注意 <base/>标签 在</head>标签上面的
-->2.7图片标签和链接
1.图片标签
<!-- 图片标签，有六种情况都要知道 -->
正常图片<br />
<img src="images/2.jpg" width="992" height="420" alt="" /><br />
带边框的图片<br />
<img src="images/2.jpg" width="992" height="420" border="3" alt="" /><br />
拉伸的图片,工作里面是不允许图片拉伸，因为图片放大会失真，如果需要大图找UI 美工，提供需求有人来设计图片大小<br />
<img src="images/2.jpg" width="1600" height="420" alt=""><br />
等比例缩小<br />
<img src="images/2.jpg" width="500" alt="" /><br />
提示文本，加了title 提高用户体验的.<br />
<img src="images/2.jpg" width="992" height="420" title="我是小米图片" alt="" /><br />
替换文本，站在用户的角度去考虑问题的，当图片不存在的时候或者加载慢的时候时候给用户一个提示<br />
<img src="images/666.jpg" width="992" height="420" alt="请仔细检查你的图片名称是否正确" /><br />
<!--
图片标签 img 是单标签
src 图片的路径 普遍都是相对路径
width 图片的宽度
height 图片的高度
border 图片的边框
title 当鼠标经过图片的时候给用户一个提示--加薪
alt 当图片不存在的时候给用户一个提示--加薪
总结：不管是title还是alt 都是站在用户的角度去考虑问题的
-->2.图片链接
图片链接就是在<a></a>链接中嵌套一个图片链接
<a href="http://www.jd.com"><img src="images/a17.jpg" width="122" height="111" alt=""></a>
<a href="###"><img src="images/a18.jpg" width="122" height="111" alt=""></a>
<a href="07-图片标签.html"><img src="images/a5.jpg"width="122" height="111" alt=""></a>2.8锚点链接
锚点链接可以再点击链接后跳到你想跳到的地方
首先就是要在想跳到的地方打上一个锚点(即写上id),在链接处写上#+id名
<h2 id="top">目录</h2>
<hr />
1 早年经历<br />
2 <a>演艺经历</a><br />
3 <a></a><br />
4 <a>主要作品</a><br />
5 社会活动<br />
6 获奖记录<br />
7 人物评价<br />
<br />
<br />
<a href="#top">返回顶部目录</a>2.9 div和span标签
div是块级元素,可以理解为一个大盒子,网页布局都是大量推荐使用div来布局
span是行级元素,可以理解为一个小盒子,网页布局一些小的区域,或者说修饰性的文字或图片我们都会用span
<div>我是div标签</div>
<span>我是span标签</span>
2.10 列表
1.列表分类:列表分为有序列表,无序列表和项目列表
<h3>无序列表</h3>
<ul>
<li>列表一</li>
<li>列表一</li>
<li>列表一</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>列表一</li>
<li>列表一</li>
<li>列表一</li>
</ol>
<!-- 列表样式
总结：无序列表默认的是小黑点，有序列表默认的是阿拉伯数字
-->
<dl>
<dt>项目名称</dt>
<dd>项目描述</dd>
</dl>
2.列表样式
| 无序列表样式修改 | |
| type="disc" | 默认的小黑点 |
| type="square" | " 小方块 |
| type="circle" | 小圆圈 |
| 有序列表样式修改 | |
| type="A" | 英文大写排序 |
| type="a" | 英文小写排序 |
| type="I" | 罗马数字 |
812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
