HTML
HTML学习
HTML基础
(Organize & Edit from: ZhuanFou.com)
1.0.0 HTML文档解析
<!DOCTYPE html>定义为HTML5
<html></html>在这之间描述整个网页
<head></head>包含meta标记信息
<tittle></tittle>页面标题
<body></body>网页上可见内容
<h1></h1>大标题
<p></p>段落
<br>换行符
<a href="网页地址">链接</a>
<a href="网页地址" target="_blank">新开一个选项卡再打开链接</a>
<img src="图片地址">
<p style="color:red;">段落设置为红色</p>
<body bgcolor="设置这个页面的颜色">
<!--注释-->
1.0.1 HTML标签
<标签名>内容</标签名>
成对出现:<p>段落内容</p>
start tag/opening tag 开始标签
end tag/closing 结束标签
1.0.2 HTML页面结构
Tips:浏览器仅会显示出<body>部分
1.0.3 HTML标题
Heading 是由<h1>到<h6>标签定义出的。
<h1>意味着是最为重要的标题,<h2>次之,<h6>重要性最弱
1.0.4 HTML颜色
颜色:
背景颜色:<h1 style="background-color:Tomato;">Tomato</h1>
文本颜色:<h1 style="color:Tomato;">Tomato</h1>
边框颜色:<h1 style="border:1px solid Tomato;">Tomato</h1>
1.1.0 HTML+CSS
Tips:前面我们对于HTML已经有了一定的了解,而CSS能够调整HTML的版式,让它的外观更加的丰富,下面一起来看看吧!
1.1.1 HTML样式
设置HTML元素的style
属性可以改变该元素的样式,格式如下:
<标签名 style="特性1:取值1;特性2:取值2;...特性n:取值n;"> 元素内容 </标签>
特性指的是该元素的CSS特性,取值指的是该元素的CSS特性的值。
1.1.2 HTML背景色
使用background-color
特性设置元素的背景色。(也可以使用background设置背景色,并且推荐使用background,因为background不仅能设置背景色,还可以设置背景图片,功能上比background-color强大,应用面更广,且更简短)
两种 Back Ground Color的写法<div style="background-color:LightGray;">文本</div>
<div style="background:LightBlue;">文本</div>
1.1.3 HTML文本颜色
使用color
特性设置该元素内的文本颜色。<p style="color:Red;">文本</p>
1.1.4 HTML字体
使用font-family
特性来设置该元素内文本是什么字体[font-family特性的取值未必一个,优先级从左往右]。<h1 style="font-family:verdana;">文本</h1>
<p style="font-family:courier,verdana;">文本</p>
Tips:p元素,优先采用courier字体,当courier字体不存在时,才会采用verdana字体
1.1.5 HTML字体大小
使用font-size
特性来设置该元素内字体的大小,取值可以是百分比也可以是px,但是不推荐使用百分比。<h1 style="font-size:200%;">文本</h1>
<p style="font-size:14px;">文本</p>
1.1.6 HTML对齐方式
使用text-align
特性来定义文本的水平对齐方式,居中、左对齐、右对齐等。<p style="text-align:center;">居中对齐</p>
<h3 style="text-align:right;">右端对齐</h3>
<div style="text-align:left;">左端对齐</div>
1.2.0 HTML文本格式
除了通过style属性
与css类
的方式,HTML也提供了一些具有特殊意义的元素,为的就是快捷方便。
<b>
- 加粗字体<strong>
- 加重字体[外表上往往体现成加粗字体]<i>
- 斜体字体`<em>
- 着重文字[外表上往往体现成斜体字体]<mark>
- 标记文字[外表上往往体现成具有某种背景色]<small>
- 小号字体<del>
- 被删除的字体,即有中划线<ins>
- 插入字体,一般提现出有下划线<sub>
- 下标<sup>
- 上标
详细:
1.2.1<b>
与<strong>
`<b>`与`<strong>`可以加粗加重字体。
`<p>文本被<b>加粗</b>了</p>`
`<p>文本被`<strong>加重</strong>了</p>`
1.2.2<i>
与<em>
`<i>`与`<em>`都会使字体变成*斜体*。
`<p>文本是 <i>斜体</i> 的</p>`
`<p>文本是 <em>斜体</em> 的</p>`
1.2.3<mark>
`<mark>`可以标记文字,一般会文字变成具有某种背景色。
`<p>文本被 <mark>标记</mark> 了</p>`
1.2.4<small>
`<small>`是文字变成小号字体。[小号字体是相对默认字体而言,具体实践中也要看相应的样式表是怎么设计的]
`<p>文本是 <small>小号字体</small>的</p>`
1.2.5<del>
与<ins>
`<del>`使字体具有~~中划线~~;`<ins>`让字体具有下划线。
`<p>文本是有 <del>中划线</del> 的</p>`
`<p>文本是有 <ins>下划线</ins> 的</p>`
1.3.0 CSS实战测试
通过上述学习,你已经基本掌握了CSS与HTML,下面可以结合所学内容开始尝试做一两个小网页了!
1.3.1 HTML五彩单页
源码:
<h1>恭喜,购买成功!</h1>
<h2 style="border:3px solid Orange;">商品名称:[name]</h2>
<h2 style="border:3px solid Orange;">购买时间:[date]</h2>
<h2 style="border:3px solid MediumSeaGreen;">你的卡密信息:<br>[kmdata]</h2>
<h2 style="border:3px solid SlateBlue;">使用说明:<br>[alert]</h3>
<style>
.fuck_weapon {
background-color: pink;
color: white;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="fuck_weapon">
<h2>443小店</h2>
<p>数字产品专营 | shop.443.email</p>
</div>
</div>
1.3.2 HTML课程表
这段时间由于新冠疫情,大家一直是接收着网络授课的形式,那么用所学的知识完善一张自己的电子课表是不是很酷呢?
Tips:因为是课程表,而我们的工作日为5天,那么我们可以理解为我们需要1份主页和5份子页面。由Index页面创建超链接,来跳转到子页面而在网页末端加上一个返回菜单键则是更加的易用。
项目源码解析:
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<tittle>网络课程表</tittle>
</head>
<body>
<h1 style="text-align:center;color:red">我的一周</body>
<p style="color:green"><a href="/mon.html">星期一</a></p>
<p style="color:green"><a href="/tue.html">星期二</a></p>
<p style="color:green"><a href="/wed.html">星期三</a></p>
<p style="color:green"><a href="/thi.html">星期四</a></p>
<p style="color:green"><a href="/fri.html">星期五</a></p>
</body>
</html>
mon.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<tittle>星期一</tittle>
</head>
<body>
<h1 style="text-align:center;color:brown">星期一</h1>
<p>第一节课:<a href="#">英语</a></p>
<p>第二节课:<a href="#">语文</a></p>
<p>第三节课:<a href="#">数学</a></p>
<p>第四节课:<a href="#">政治</a></p>
<p>第五节课:<a href="#">地理</a></p>
<p>第六节课:<a href="#">历史</a></p>
<br/>
<br/>
<br/>
<p style="text-align:center;color: dodgerblue"><a href="index.html">返回</a></p>
</body>
</html>
1.3.3 HTML表格
前文我们使用了链接的方式来实现课程表的制作,但是你不得不承认这种方法相对而言很繁琐。下面尝试用HTML的语句来完成表单页吧!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Class Schedule</title>
<style>
table, th, td {
border: 1px solid DarkOrange;
}
</style>
</head>
<body background="bg.png">
<table align="center">
<caption>Class Schedule</caption>
<tr>
<th>\</th>
<th align="center"colspan="6">Week</th>
</tr>
<tr>
<th align="center"rowspan="4">AM</th>
<td align="center">Time</td>
<td align="center">Mon</td>
<td align="center">Tue</td>
<td align="center">Wed</td>
<td align="center">Thu</td>
<td align="center">Fri</td>
</tr>
<tr>
<td align="center">Section 1<br>8:30-9:15</td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Chinese</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Chinese</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Chinese</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Chinese</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Chinese</a></td>
</tr>
<tr>
<td align="center">Section 2<br>9:35-10:20</td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Maths</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Maths</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Maths</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Maths</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Maths</a></td>
</tr>
<tr>
<td align="center">Section 3<br>10:40-11:25</td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">English</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">English</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">English</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">English</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">English</a></td>
</tr>
<tr>
<th align="center"rowspan="2">PM</th>
<td align="center">Section 4<br>14:00-14:45</td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">History</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">History</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">History</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">History</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">History</a></td>
</tr>
<tr>
<td align="center">Section 5<br>15:05-15:50</td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Po</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Po</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Po</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Po</a></td>
<td align="center"><a href="https://ke.qq.com" target="iframe_name">Po</a></td>
</tr>
</table>
<iframe src="https://www.baidu.com" name="iframe_name" style="width:100%;height:600px;border:1px solid LightGray;"></iframe>
<a href="https://ke.qq.com" target="iframe_name">Chick me Back to Tencent Class Home Page</a>
</body>
</html>
Tips:博主在这份表中加入了"iframe框架"来实现在页面内来实现在页面内观看视频,而各位在开发过程中可以视自身偏好而定!
1.4.0 HTML布局
如我们所见,在上一个章节中,学习了<table>标签,而通过对table内的<td>标签格式的制定,我们就可以使用table来制作网页布局。但是人的精力是有限的,尤其编程知识的学习,没必要把方方面面都搞懂,抓主干,去枝节;因为这些枝节不实用、兼容性有问题、未来会被淘汰等。
现在市面上主流的布局通常采用<div>标签来进行。使用<div>元素进行HTML布局是最朴素实用方便的技巧,所以强烈推荐以这种方式为主。
在HTML5中提供了一些新的布局元素。这些所有的布局元素的实质就是div元素,而之所以换成各种不同的名字,则是在强调暗示该部分元素在整体页面中的地位。
这是一种更科学美好的用法,但从实用角度来说,并非完全强制。是否采用,可酌情而定,个人习惯、团队习惯都是重要影响因素。推荐把<header>
和<footer>
等常用的html5布局标签使用起来,因为这些特定名称的布局标签会有助于开发者自己或开发者合作伙伴对源代码更好的理解。但是更多主体部分的布局,还是推荐以div为容器,因为人的脑容量是有限的,div是万变不离其宗。
以下是对于<div>来进行网页布局的结构理解
布局类语义元素 | 语境内涵 |
---|---|
header | 定义网页第一行,即页眉部分 |
nav | 定义导航菜单栏 |
section | 定义文档中的某个章节 |
article | 暗示内部是一篇文章 |
aside | 定义主体内容之外部分,如侧栏 |
footer | 定义网页最下面一行,即页脚 |
details | 定义额外的细节部分 |
summary | 定义某个details元素的标题 |
代码详解:
CSS部分:
<style>
div {
box-sizing: border-box;
}
#header {
background-color: #333;
color: white;
text-align: center;
padding: 5px;
}
#nav {
line-height: 30px;
background-color: #ffd1ca;
height: 620px;
width: 30%;
float: left;
padding: 20px;
}
#section {
width: 70%;
float: left;
padding: 10px;
}
#footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding:5 px;
}
</style>
Body部分:
<body>
<div id="header">
<h1>Only Mystery 测试页</h1>
</div>
<div id="nav">
table标签<br>
div标签<br>
其他标签<br>
</div>
<div id="section">
<h1>div</h1>
<p>一个帮助你完成网页排版的标签<br>下面开始学习HTML</p>
<iframe src="https://blog.bidc.ltd/45.html" name="iframe_name" style="width:100%;height:450px;border:1px solid LightGray;"></iframe>
</div>
<div id="footer">
Copyright © 2020 Only Mystery all rights reserved.
</div>
</body>