(175集)
<!DOCTYPE html> # 文档的声明,为html文件
<html>
<head> # head中放的是网站的配置信息,如网页的标题以及文本的译码方式等
<!-- <title>：指定整个网页的标题，在浏览器最上方显示。-->
<!-- <meta>：提供有关页面的基本信息-->
<!-- <link>：定义文档与外部资源的关系。-->
<!-- <style>:定义内部样式表与网页的关系-->
#指定文本译码方式
<meta charset="utf-8">
#指定文档的内容类型和编码类型
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> #其中text/html 就是文本内容类型
#指定网站标题
<title>练习</title>
#进行网页的跳转
<meta http-equiv="refresh" content="2;URL = http://www.luffycity.com"> #其中2表示停留几秒后进行跳转,其后网址为你想要跳转到
的网页,refresh表示进行刷新.
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" /> #主要用于页面的关键字和描述，是写给搜索引擎
#看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
<meta name="Description" content="网易是中国领先的互联网技术公司，游戏、搜索引擎服务，及博客，网聚人的力量。" />#这些关键词，就是告
#诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。这个技术叫做SEO
#（search engine optimization，搜索引擎优化）
<meta name=viewport content="width=device-width, initial-scale=1">#上面这个标签，是让我们网页支持移动端，移动设备优先（了解即可）
<link rel="shortcut icon" href="图片资源地址" type="image/vnd.microsoft.icon"> #通过link链接外部资源,给标签添加图标
<link rel="icon" href="图片地址" type="image/vnd.microsoft.icon">#通常与shortcut icon连用,此举是为了避免某些游览器加载不出
shortcut icon规则的图标,也即icon是给shortcut icon做
备胎的.
<link rel="stylesheet" href="./index.css"> #用link也可以链接到本地资源,当href中地址为外部地址时,连接的是外部资源
<style type="'text/css">
<!-- 写在这里的语句,相当于是直接在css文件中写入的语句,也即它就相当于取代了link链接的css文件-->
span{
color: blue;
} #注意了span是会选中body中的所有被span包含起来的内容,也即body中所有被span包含的内容都会变成蓝色字体
h1{
color: red;
}# h1也会选中body中的所有被h1括起来的内容,也即body中的所有h1中的内容字体都会变成红色
.类名{
color:red;
}# 使用类名可以强制修改,该类中的所有文本,但被span括起来的不行,且图片内容也不行
</style>
</head>
<body> # body中放的只是文本,也即任何与网站配置有关的,都没body什么事,但任何你想要让网站显示的内容,都需要写在body中
吴 亦 凡 # 注意了html对空格和换行不敏感,存在空白折叠现象,因此吴亦凡中可能只隔了一个或两个空格
(176集)
# 标签
<hr /> #是一个分割线
<br />#换行标签,相当于python中的/n
肖 战 #表示肖战之间空两个空格,一个 代表一个空格,';'表示结束符
<u>下划线标签</u>
<strong>字体加粗标签</strong>
<em>斜体标签</em>
<i>也是斜体标签</i>
5<sup>2</sup> #表示5的2次方
5<sub>2</sub> #表示5的2次幂
<h1-h6>为标题标签,每一个都是不同样式的字体</h1-h6>
注意:在body中除了<h1-h6> </h1-h6>是会单独占到一行,输出外.其他的像<u>,<strong>等都是被放在同一行输出的,要想换行,还需借助<br />
<div id="topBar">
topBar:头部栏
header:头部
container:内容区
footer:脚步
</div> #用div可以实现对页面不同区域的分割,但不结合css,你看到的只是换行后的文本
<span>想要修饰的文本内容</span> #可以用span标签来修饰文本中的内容,且不会改变文本格式,注意了span括起来的内容要想改变,还需要在
style中进行操作,也即需要css进行操作
<p>p标签中只能放文字,图片,表单等元素,其他的一律不能放,也即div,h1等容器标签都不能放,span可以<p> #p标签输出自带换行,且p标签的两行
文本之间会有上边距与下边距,同h1-h6一样
<a href="百度地址">百度一下</a> #超链接标签,此例中点击页面中的'百度一下',就会给你跳到百度界面.且a标签不会换行
a标签中有一个target属性,要是target='_self'表示超链接的另一个网页,在当前网页中打开.
要是target='_blank',则表示超链接的网页在新的空白窗口打开.
<img src="图片地址" alt="图片资源加载失败时的提示" width="宽度" height="高度"> #img标签可以在页面中显示你想要插入的图片,一般
我们为了不让图片失真,都会只添加width和height中的一个,让系统自动按最佳比例加载图片
#行内标签
(1)在一行内显示 span strong em i del a label b
(2)行内标签没有宽高属性,也即不能设置宽和高
(3)行内块标签: img input,行内块标签既有行内标签特性,又有块级标签中的可以设置宽高属性的特性,但不包含块级标签的独占一行特性
#块级标签
(1)div p h1-h6 ul li ol dl dt dd form table
(2)独占一行
(3)可以设置宽和高,如果不设置宽和高,默认的宽度是父亲的100%,高度是内容的高度
<form action="https://www.baidu.com/s">#当你后端ban时会给你链接该地址
<input type="text" name="wd" values=""/> #type='text'输入内容为文本类型,name='wd'匹配关键字,value=''关键字是什么
若为空,则表示关键字为你输入的文本其中name后不可以为空,否则它无法显示搜索结果.
<input type="submit" value="搜索"> #type='submit'提交的form表单,value='搜索'触发的按钮命名为'搜索'
</form>
</body>
</html>