HTML&CSS学习总结

欣仔yyds

已于 2022-07-07 11:10:15 修改

阅读量106

点赞数

文章标签： html css 学习

于 2022-07-06 22:06:00 首次发布

本文链接：https://blog.csdn.net/qq_52582567/article/details/125646334

版权

一、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.实例

<!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相互结合，多运用，这样二者才能交相辉映，我们才能设计出内容新颖、样式显眼的网页。