一、HTML
1.HTML的定义
HTML,超文本标记语言,写给浏览器的语言,目前网络上应用最广泛的语言。HTML也在不断的更新,最新版本已经出现了HTML5。在HTML5中出现了许多新特性,也遗弃了一些旧元素。我们写好html文件后,在浏览器中打开。主流的浏览器包括IE、Firefox、Chrome、Goole等。
2.HTML标签元素
HTML元素由开始标签和结束标签组成。
如<p>/<p>,<h1><h1/>,有一对开始<>和结束</>。一般标签名用小写。
标签具有属性,属性用来表示标签的特征。
3.HTML基本结构
<html>
<head>
<title>这是我的头部</title>
</head>
<body>
这是我的身体。
</body>
</html>
第一个标签<html>是告诉浏览器这是html文档的开始。
HTML文档的最后一个标签是</html>,是告诉浏览器这是html的终止。
标签<head></head>之间的文本是头部信息,
在<title></title>之间的文本是文档标题,
会显示在浏览器的窗口的标题栏。
<body></body>之间的文本是正文。
4.规范的HTML页面
4.1 文档声明
在<html>前,要写文档声明语句: <!DOCTYPE HTML>,
当然也可以用小写表示。文档声明的作用是告诉浏览器该文档遵循HTML规范。
4.2 标题
一般情况下,我们都会设定HTML文档的标题。
标签为<title></title>,标签内放标题名称。
4.3 页面编码
编码的种类有多种,但常用的是utf-8和gb2312。
utf-8为多国语言编码,gb2312为中文简体编码。
设置网页编码的语句为<meta charset= "utf-8" />,是在<head></head>标签内定义的。
4.4 页面关键字、内容
我们可以在文档中设置一些关键词,内容介绍。
这样的好处是,当我们的网页发布在网上,用户可以通过在搜索框中输入关键字,
找出一些比较符合的网页。这样一来,我们的网页便可以更容易地被别人访问。
5.常用元素
5.1 换行
<body>
我要换行<br />换行后
</body>
5.2 段落
<p>
我走遍整片大陆,只为找到你的残骸,为你超度。我的背后留下了无数的坑,那都是我曾做找你的证明。当我找到你的时候,不料我已万鬼缠身,我只好牺牲自己,赠予你暂时的生命,短暂的重逢后,我们双双死去.
</p>
<p>
漫天的冰雪冻结了我的心,但它冻结不了我心中的正义,我愿用我严寒的身躯冰冻这世间的邪恶。
</p>
在定义了段落后,可以利用属性align来对段落进行设置。属性align的值包括left(左对齐)、center(居中对齐)、right(右对齐)三种。
<p align='center'>
我走遍整片大陆,只为找到你的残骸,为你超度。我的背后留下了无数的坑,那都是我曾做找你的证明。当我找到你的时候,不料我已万鬼缠身,我只好牺牲自己,赠予你暂时的生命,短暂的重逢后,我们双双死去.
</p>
<p align='center'>
漫天的冰雪冻结了我的心,但它冻结不了我心中的正义,我愿用我严寒的身躯冰冻这世间的邪恶。
</p>
5.3 标题
<h1>静夜思</h1>
<h2>李白</h2>
<h3>床前明月光</h3>
<h4>疑是地上霜</h4>
<h5>举头望明月</h5>
<h6>低头思故乡</h6>
5.4 文本格式化
<b>粗粗粗粗粗粗粗粗</b><br />
<i> 斜斜斜斜斜斜斜斜 </i><br />
<del>删除删除删除删除</del><br />
5.5 定义超链接
a标签用来定义一条超链接,其中要有的是href属性,href的作用是指明超链接要链接到的网址。除了href属性,还有title属性表示链接的提示信息。target属性表示链接的打开方式,即当点击了链接,选择是在另一个页面打开还是本页面打开。其属性值包括_blank(新的空白页)、_self(当前页),_top(当前页)。
<a href="#" target="_blank">百度一下</a>
<!-- href的值可以是外部链接,也可以是内部文件,如***.html文件 -->
<a href=“http://www.163.com”>外部链接</a>
<a href=“about.html”>内部链接 </a>
<!-- href也可以链接到别的地址,如邮箱、电话 -->
<a href=“1233456.qqcom”>邮件链接</a>
<a href=“tel:电话号码”>拨打电话</a>
<a href="sms:139xxxxxxx">发送短信</a>
5.6 图像
<img src="https://c-ssl.duitang.com/uploads/item/202004/12/20200412032137_xcaAB.jpeg" width="500" height="500" alt="小金毛" />
5.7 列表
<ul type="disc">
<li>嘻嘻</li>
<li>哈哈</li>
<li>啦啦</li>
</ul>
<ul type="circle">
<li>嘻嘻</li>
<li>哈哈</li>
<li>啦啦</li>
</ul>
<ul type="square">
<li>嘻嘻</li>
<li>哈哈</li>
<li>啦啦</li>
</ul>
<ol type="1" start="1">
<li>嘻嘻</li>
<li>哈哈</li>
<li>啦啦</li>
</ol>
<ol type="a">
<li>嘻嘻</li>
<li>哈哈</li>
<li>啦啦</li>
</ol>
<ol type="A">
<li>嘻嘻</li>
<li>哈哈</li>
<li>啦啦</li>
</ol>
<ol type="i">
<li>嘻嘻</li>
<li>哈哈</li>
<li>啦啦</li>
</ol>
<ol type="I">
<li>嘻嘻</li>
<li>哈哈</li>
<li>啦啦</li>
</ol>
<dl>
<dt>我喜欢</dt>
<dd>唱歌</dd>
<dt>我喜欢</dt>
<dd>csgo </dd>
<dd>apex </dd>
</dl>
二、CSS
1.CSS概述
- List item
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
2.实例
1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS实例</title>
<style>
body {background-color:pink;}
h1 {font-size:30pt;}
h2 {color:yellow;}
</style>
</head>
<body>
<h1>大小 30</h1>
<h2>这是黄色</h2>
</body>
</html>
3.注释
CSS注释以 /* 开始, 以 */ 结束
/*这是个注释*/
p
{
text-align:center;
/*这也是个注释*/
color:black;
font-family:arial;
}
4.CSS如何生效
插入样式表的方法有三种:
- 外部样式表
新建一个HTML文件,输入内容,然后在同一目录下创建CSS文件夹,然后新建一个样式表文件main.css. - 内部样式表
样式放在HTML文件中.
/*在<head>元素中引入了<style>标签,放入了样式。*/
- 内联样式
直接把样式规则写到要应用的元素中.
5.颜色、尺寸、对齐
- 在网页中可以使用颜色名称或使用颜色RGB16进制值,来设定前景或背景的颜色
- 使用height和width设定元素内容占据的尺寸。常见的单位有:像素px,百分比%,rem、em等。
- 对于元素中的文本,我们可以简单的设置text-align属性为left, center, right即可。
三、总结
通过对HTML的学习我发现HTML是十分重要的一个超文本标记语言,它虽然不是一门编程语言但是它却十分强大,它里面包含了很多标签,通过这些标签我们使用者就可以根据自己的需要来设计一个网页,把我们想要表达的内容放进这个网页当中,它定义了网页内容的含义和结构。但是仅仅通过HTML是不能设计网页的样式的,要想更好的设计出一个好看的网页需要使用CSS技术。因此,对于HTML的学习要和CSS相互结合,多运用,这样二者才能交相辉映,我们才能设计出内容新颖、样式显眼的网页。