HTML+CSS学习笔记

最新推荐文章于 2023-05-31 11:19:06 发布

mingshengda

最新推荐文章于 2023-05-31 11:19:06 发布

阅读量349

点赞数 1

分类专栏： mingsheng的学习笔记文章标签： css html 学习

本文链接：https://blog.csdn.net/mingshengda/article/details/123104943

版权

mingsheng的学习笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础概念，包括超文本标记语言的使用、基本标签如段落、标题、链接等的实例，以及实体符号、表格、列表和表单的运用。通过实例演示了CSS基础应用，涵盖了ID属性、div和span布局，以及CSS的选择器和样式设置。

摘要由CSDN通过智能技术生成

一、什么是HTML
Hyper Text Markup Language 超文本标记语言
运行在浏览器上。
超文本：超级文本，如流媒体，声音，视频，图片等。标记语言：这种语言是由大量的标签组成。
任何一个标签都有开始标签和结束标签，例如：
<标签>：开始标签
</标签>：结束标签
HTML严格意义上说只能是一种规范，一种浏览器上的规范，标签语言不能被称为编程语言，因为HTML没有变量，数据类型，控制语句等。
web:网站开发。
第一个程序：

<!--这是注释-->
<html>
    <head>
         <!--标题栏-->
       <title>mingsheng</title>
    </head>
    <!--网页体-->
    <body>
        <!--body中的内容会显示到页面中-->
        B站关注小可学妹
    </body>
</html>

二、基本标签
分段标签：<p></p>可用用来分段。
标题字：<h1></h1>~<h6></h6>
换行标签：<br>
水平线：<hr>,color是一个属性，用来指定颜色值。
预留格式：<pre></pre>中间的源码是什么样，就会显示什么样。
粗体字：<b></b>
斜体字：<i></i>
插入字：<ins></ins>
删除字：<del></del>
font字体标签：<font></font>
背景色：bgcolor
背景图片： <body background="https://i01piccdn.sogoucdn.com/282a7ca831475d89">
图片： <img src="https://i03piccdn.sogoucdn.com/d17f38975035d6a3">
超链接： <a href="https://space.bilibili.com/14387072/?spm_id_from=333.999.0.0">小可B站主页</a>
超链接的target属性用来设置最终打开窗口的位置。

例子：

<html>
    <head>
        <title>B站关注小可学妹</title>
    </head>
    <body>
        <!--段落标记-->
        <p>
            看小可直播的时候会有一种很温暖的感觉，就好像是家里的氛围一样。在开播前会有期待，想到小可开播就会出现莫名的悸动，而开播中却不并不怎么认真的看，只是挂着。在打游戏时挂着，打代码时挂着，在外面吃饭时，把手机调成静音挂着，有人可能会说这样子看直播有什么意义，我会说：只要手机里有小可的实时更新的画面，我就会有一种特殊的感觉，我觉得这应该被称之为：安心。</p>
            <p>
看直播的欢乐时光总是觉得很短暂，“为什么欢乐的一天总是要结束呢”，我们没办法挽留时间，我们只好且行且珍惜。</p>
<p>
只要你一天不毕业，我就一直默默陪伴你，哪怕你根本注意不到我的存在，对我来说真的无所谓，喜欢你的这种感觉，不会因为没有回应而消失。
        </p>
        <hr color="black">
        <!--标题字-->
        <h1>爱小可</h1>
        <h2>爱小可</h2>
        <h3>爱小可</h3>
        <h4>爱小可</h4>
        <h5>爱小可</h5>
        <h6>爱小可</h6>
        hello <br> Kero!
        <!--水平线-->
        <hr color="red">
        <pre>
        <b>双歌吖</b>
        <i>双歌吖</i>
        <ins>双歌吖</ins>
        <del>双歌吖</del>
        (爱小可）<sup>6</sup>
        双歌吖<sub>6</sub>
        <font color="red"   size="6">hello kero!</font>
        </pre>
    </body>
</html>

三、实体符号、表格
空格： 
小于号：<
大于号：>
表格标签：<table></table>,行：，列：<td></td>,border是用来设置边框宽度。
合并单元格：colspan表示列合并，rowspan表示行合并。
表格的th标签：th中的内容，自动加粗，自动居中。
thead,tbody.tfoot:可以将表格分成三部分。
例子：

<html>
    <head>
        <title>B站关注小可学妹</title>
    </head>
    <body>
     <pre>
      爱&nbsp;小&nbsp;可
      爱小可&gt;爱阿梓
      爱小可&lt;爱阿梓
      <table border="3px" width="300px" height="300px">
          <tr>
              <td>小可学妹</td>
              <td>小可学妹</td>
              <td>小可学妹</td>
          </tr>
          <tr>
            <td>小可学妹</td>
            <td>小可学妹</td>
            <td>小可学妹</td>
          </tr>
          <tr>
            <td>小可学妹</td>
            <td>小可学妹</td>
            <td>小可学妹</td>
          </tr>
      </table>
      <table width="50%" border="3px">
        <tr>
            <td>小可学妹1</td>
            <td colspan="2">小可学妹2小可学妹3</td>
            
        </tr>
        <tr>
          <td>小可学妹4</td>
          <td>小可学妹5</td>
          <td rowspan>小可学妹6小可学妹9</td>
        </tr>
        <tr>
          <td>小可学妹7</td>
          <td>小可学妹8</td>
        </tr>
      </table>
       
      <table border="3px" width="300px" height="300px">
        <tr>
            <th>单推人编号</th>
            <th>单推人ID</th>
            <th>单推人寿命</th>
        </tr>
        <tr>
            <td>001</td>
            <td>1506666</td>
            <td>99</td>
        </tr>
      </table>
      <table border="3px" width="300px" height="300px">
          <thead>
      <tr>
        <td>小可学妹</td>
        <td>小可学妹</td>
        <td>小可学妹</td>
    </tr>
</thead>
<tbody>
    <tr>
      <td>小可学妹</td>
      <td>小可学妹</td>
      <td>小可学妹</td>
    </tr>
</tbody>
<tfoot>
    <td>小可学妹</td>
    <td>小可学妹</td>
    <td>小可学妹</td>
</tfoot> 
      </table>
     </pre>
    </body>
</html>

无序列表：

<html>
    <head>
    </head>
    <body >
      <ul>
          <li>小可1
              <ul>
                <li>小可1
                    <ul>
                        <li>小可1</li>
          <li>小可2</li>
          <li>小可3</li>
          <li>小可4</li>
                    </ul>
                </li>
                <li>小可2</li>
                <li>小可3</li>
                <li>小可4</li>
              </ul>
          </li>
          <li>小可2</li>
          <li>小可3</li>
          <li>小可4</li>
      </ul>
    </body>
</html>

有序列表：

<html>
    <head>
    </head>
    <body >
      <ol>
          <li>小可1
              <ol>
                <li>小可1
                    <ol>
                        <li>小可1</li>
          <li>小可2</li>
          <li>小可3</li>
          <li>小可4</li>
                    </ol>
                </li>
                <li>小可2</li>
                <li>小可3</li>
                <li>小可4</li>
              </ol>
          </li>
          <li>小可2</li>
          <li>小可3</li>
          <li>小可4</li>
      </ol>
    </body>
</html>

四、表单
表单的作用：发送请求，并且携带数据给服务器。
表单和超链接有共同的特性，就是都可以向服务器发送请求，只不过超链接是用户直接点击发送请求，不能填写数据。而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。
表单最主要的作用就是：收集用户的信息。
表单对应的英文单词是：form
语法格式：

表单项1：表单项2：一个网页上可以有多个表单。 form标签中有一个action属性，与超链接的href相同，都需要填写url。例子：五、其他知识 HTML元素的ID属性 1、在HTML的任何一个节点都有ID属性 2、在同一个网页中，ID属性不能重复 3、id代表了这个节点，id是这个节点的身份证号 div和span图层：都被成为图层。图层：每一个图层在网页当中都是一个独立的盒子，图层最主要的作用就是：网页布局。table表格布局的缺点是：不灵活。每一个div和span左上角的顶点，都有x和y轴坐标，通过这个坐标可以定位div在网页当中的位置。 div默认独占一行，span不是。六、CSS 什么是CSS：Cascading Style Sheet，层叠样式语言，是专门修饰HTML的，让HTML更好看，CSS是HTML的“化妆品”。不是编程语言，属于样式表语言，没有变量，数据类型，控制语句等等。在HTML嵌入CSS：第一种方式：内联定义方式。语法结束：`<标签 style="样式名：样式值；样式名：样式值；样式名：样式值；">

选择器{
  样式名：样式值；
样式名：样式值；
样式名：样式值；
}

CSS中常见的选择器包括：标签选择器，id选择器，class选择器。
标签选择器：

标签名{}

<html>
<head>
<style type="text/css">
/*
这是CSS的注释
*/
div{
    background-color: antiquewhite;
    width: 100px;
    height: 100px;
    border-color: red;
    border-style: solid;
}
</style>
</head>
<body>
      <div></div>
</body>
</html>

id选择器：

#id{}

class选择器:

.class{}

选择器优先级：id，类，标签。
第三种方式：链入外部样式表文件。

隐藏样式：


```html
<html>
<head>
    <style type="text/css">
        #xiaoke{
            display: none;
        }
    </style>
</head>
<body>
 
</body>
<ul>
    <li>小可学妹1
        <ul id="xiaoke" >
            <li>小可学妹4</li>
            <li>小可学妹5</li>
            <li>小可学妹6</li>
        </ul>
    </li>
    <li>小可学妹2</li>
    <li>小可学妹3</li>
</ul>
</html>
CSS参考手册：https://www.runoob.com/cssref/css-reference.html
设置鼠标悬停效果：
<html>
<head>
    <style type="text/css">
       p:hover{
             color: aqua;
       }
    </style>
</head>
<body>
 
</body>
<p>
    小可学妹1
</p>
<p>
    小可学妹2
</p>
</html>


定位&光标变小手：

```html
<html>
<head>
    <style type="text/css">
      #div1{
          background-color: red;
          border: solid 1px black;
          width: 100px;
          height: 100px;
          position: absolute;
          top: 300px;
      }
      #kero{
          cursor: pointer;
      }
    </style>
</head>
<body>
 
<div id="div1"> <span id="kero">Kero</span></div>
</body>
</html>