科技资讯

Document

HTML CSS

什么是HTML？

HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言。
标记：就是标签,即 <标签名称> </标签名称>, 标签大多数都是成对出现的。

标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>

段落

HTML段落是通过 <p> 标签来定义的.

<p>
  p是一个段落标签
</p>

链接

HTML 链接是通过标签 <a> 来定义的

超链接的作用：

1）跳转到某个网页

2）在当前页面内进行跳转

        href属性为空,会刷新当前页面

        href="#top" 其中#表示在当前页面寻找：id值为top的标签

<a href="http://www.baidu.com" target="_blank">百度</a>

图像

HTML 图像是通过标签 <img> 来定义的。

<img src="./image/黄鹤楼.jpg" alt="黄鹤楼">

列表

无序列表

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

有序列表

<ol>
  <li>3</li>
  <li>1</li>
  <li>2</li>
</ol>

自定义列表

<dl>
  <dt>小标题</dt> 
  <dd>11</dd>
  <dd>12</dd>
  <dd>23</dd>
</dl>

表格

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

表单

表单标签分父元素和子元素，父元素是form,子元素有很多

表单功能有：

1）可以实现登录注册

2）向后台服务器提交数据

    <form action="后台地址" method="get/post">
        name:<input type="text" name="username"><br>
        password:<input type="password" name="password"><br>
        age:<input type="text" name="username"><br>
        birthday:<input type="date" name="bday"><br>
        sex:<input type="radio" name="sex" value="男" checked>男
            <input type="radio" name="sex" value="女">女<br>
        hobby:<input type="checkbox" name="hobby">读书
        <input type="checkbox" name="hobby">看电影
        <input type="checkbox" name="hobby">跑步<br>
        头像：<input type="file"><br>
        省份：<select name="province">
                <option selected>==请选择省份==</option>
                <option>==湖北==</option>
                <option>==湖南==</option>
              </select>
        简介：<textarea></textarea><br>
        <button>btn</button>
        <input type="submit">
        <input type="reset">
    </form>

什么是CSS？

CSS的全称为：Cascading Style Sheet 层叠样式表
是一组样式设置的规则，用于控制页面的外观样式

CSS的引用方式，有三种方式：内部样式、行内样式、外部样式

行内样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

   <div style="border: 5px solid black;
        width: 200px;height:100px">
        1
   </div>

内部样式

也称为内嵌样式，在页面头部通过style标签定义

对当前页面中所有符合样式选择器的标签都起作用

    <style>
        div {
            border: 5px solid green;
            width: 200px;height:100px;
        }
        p{
            color:purple;
            width: 200px;height:100px;
        }
        .a{
            color: yellow;
        }
        #b{
            color: red;
        }
    </style>

外部样式

使用单独的 .CSS 文件定义，然后在页面中使用 link标签引入

<link rel="stylesheet" href="a.css">

*CSS的引用的优先级由近及远

css选择器

基础选择器

1)标签选择器
也称为元素选择器，使用HTML标签作为选择器的名称

2) 类选择器
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

3) ID选择器
使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css基础</title>
    <style>
        div {
            border: 5px solid green;
            width: 200px;height:100px;
        }
        p{
            color:purple;
            width: 200px;height:100px;
        }
        .a{
            color: yellow;
        }
        #b{
            color: red;
        }
    </style>
    <link rel="stylesheet" href="a.css">
</head>
<body>
    <h3>css的引入</h3>
    <ul>
        <li>在某个元素上加style属性</li>
        <li>在head上加上style子标签</li>
        <li>通过link:css引入css标签</li>
    </ul>
    <div style="border: 5px solid black;
        width: 200px;height:100px">
        1
    </div>
    <div class="a">
        2
    </div>
    <p class="a" id="b">
        3
    </p>
    <ul>
        <li>优先级：id选择器>class选择器>元素选择器</li>
    </ul>
</body>
</html>
div {
    border: 5px solid gray;
    width: 200px;height:100px;
}
p{
    color:peru;
    width: 200px;height:100px;
}

*基础选择器的优先级：id选择器>class选择器>元素选择器

选择器还有后代 子代 交集 并集 属性选择器 和伪类选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <style>
        /* 子代 */
        div>p {
            color:green;
        }
        /* 后代 */
        div span {
            color:blueviolet;
        }
        p { 
            color: royalblue;
        }       
        .one {
            color: aqua;
        }
        /* 交集，为了缩小选中范围 */
        p.one {
           color: red; 
        }
         /* 并集，为了扩大选中范围 */
         p,.one {
            color:yellow;
         }
         input {
            width: 200px;
            height: 35px;
            outline: none;
            border: 2px solid yellowgreen;
            border-radius: 5px;
            font-size: large;
         }
         input[name="bb"] {
            color: firebrick;
         }
         button {
            width: 120px;
            height: 40px;
            border: none;
            background-color: black;
            border-radius: 8px;
            font-size: large;
            color: seashell;
         }
         /* 鼠标放上去，有阴影*/
         button:hover {
            box-shadow: 10px 10px 10px rebeccapurple;
         }
          /* 鼠标点击动一动 */
         button:active {
            transform: translate(5px,5px);
         }
    </style>
</head>
<body>
    <h3>css选择器</h3>
    <ul>
        <li>优先级：id选择器>class选择器>元素选择器</li>
        <li>后代 子代 交集 并集/li>
        <li>属性选择器</li>
        <li>伪类选择器</li>
    </ul>
    <div>
        <p>
            <span>text1</span>
        </p>
        <span>text2</span>
        <p class="one">
            onepiece
        </p>
        <p>
            twopiece
        </p>
        <div class="one">
            a div
        </div>
        <hr>
        <h3>属性选择器</h3>
        <input type="text" name="aa" value="aa">
        <input type="text" name="bb" value="bb">
        <hr>
        <h3>伪类选择器</h3>
        <button>按钮</button>
    </div>
</body>
</html>