第一章： HTML

发布于：2022-12-15 ⋅ 阅读:(648) ⋅ 点赞:(0)

第一章： HTML

1.1 vscode

  • 调节皮肤

在这里插入图片描述

在这里插入图片描述

1.2 Html简介

  • 超文本标记语言 (英语：Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。

1.2.1 文档内容详解

<!DOCTYPE html>就是h5的标识
<html lang="en"> 网页的语言
  • 总结：HTML中不区分大小写，可以大小写混合写，一般都小写的比较多

1.2.2 标签meta

³ <meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
5秒自动刷新一次
³ <meta http-equiv=“refresh” content=“5;url=https://www.baidu.com”>
³ 为搜索引擎提供的关键字列表
³ <meta name="keywords" content=“ 关键词1关键字2 ">
³ <meta name="description" content=“ 文档描述">
³ 过期时间（秒），0表示只要刷新网页就重新抓取后台数据
³ <meta http-equiv="expires" content="0">
³ 不缓存页面
<meta http-equiv="pragma" content="no-cache">

1.2.3 常用标签

<style>样式表</style>
<script>必须成对出现</script>

<body>
    正文部分
</body>
  • 案例：表格组件
<!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>主题</title>
</head>
<body>
    <div align="center"> 
        <table border="1">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>leo</td>
                    <td>boy</td>
                    <td>11</td>
                    <td>删除|更新</td>
                </tr>
                <tr>
                    <td>alice</td>
                    <td>girl</td>
                    <td>11</td>
                    <td>删除|更新</td>
                </tr>
                <tr>
                    <td>monic</td>
                    <td>girl</td>
                    <td>11</td>
                    <td>删除|更新</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
  • 案例：脚本的使用
<!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>主题</title>
    <script>
        function fun1(obj){
            obj.width = 400
            obj.height = 400
        }

        function fun2(obj){
            obj.width = 200
            obj.height = 200
        }
    </script>
</head>
<body>
    <div align="center"> 
        <img src="images/001.png" width="200" height="200" 
        onmouseover="fun1(this)" onmouseout="fun2(this)">
    </div>
</body>
</html>

1.2.4 boby

  • 控制颜色
<!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>主题</title>
</head>
<body bgcolor="red">
    <div align="center"> 
                
    </div>
</body>
</html>
  • 背景图片
<!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>主题</title>
</head>
<body background="images/002.png">
    <div align="center"> 

    </div>
</body>
</html>
  • 线
<!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>主题</title>
</head>
<body >
    <div align="center"> 
       <hr size=20 color="blue">
    </div>
</body>
</html>
  • 超链接
<!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>主题</title>
</head>
<body >
    <div align="center"> 
       <a href="a.html?name=张三&sex=男" target="_blank" onclick="confirm('del?')">链接</a>
    </div>
</body>
</html>
  • URL(统一资源定位):地址栏完整的路径 http://localhost:8080/abc/del?id=1001
  • URI(统一资源标识): abc/del?id=1001
  • RUN(统一资源名称)

1.2.5 文字标签

<!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>主题</title>
</head>
<body >
    <div align="center"> 
        <h1>hello</h1>
        <h6>world</h6>
        <font size="30" color="green">字体大小</font>
        <p>文字段落</p>
        <pre>
            文件的
            格式
                 不发生变化
        </pre>
        <marquee>跑马灯</marquee>
    </div>
</body>
</html>

1.2.6 tree标签

<!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>主题</title>
</head>
<body >
    <div align="center"> 
       <ul>
          <li>
            中国
             <ul>
                <li>江苏
                    <ul>
                        <li>南京</li>
                        <li>宿迁</li>
                    </ul>
                </li>
             </ul>
          </li>
       </ul>
    </div>
</body>
</html>
  • 案例：css+javascript
<!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>主题</title>
    <script>
        function fun(){
            var abc = document.getElementById('ida')
            abc.style = 'display: none;'
        }
    </script>
</head>
<body >
    <div align="center"> 
       <ul>
          <li>
            中国
             <ul>
                <li onclick="fun()">江苏
                    <ul id="ida" style="display: inline;">
                        <li>南京</li>
                        <li>宿迁</li>
                    </ul>
                </li>
             </ul>
          </li>
       </ul>
    </div>
</body>
</html>

1.3 表单控件

1.3.1 表单form

<form action="" method="post"></form>
action="跳转的地址"
method:提交的方式、get、post

13.2 输入框

<!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>主题</title>
    <script>
        function fun(){
            var abc = document.getElementById('ida')
            abc.style = 'display: none;'
        }
    </script>
</head>
<body >
    <div align="center"> 
      <form action="a.html" method="post">
        用户：<input name=""><br>
        密码：<input type="password" name=""><br>
        <input type="submit" value="提交">
      </form>
    </div>
</body>
</html>

1.3.3 下拉框

<!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>主题</title>
    <script>
        function fun(){
            //控件
            var abc = document.getElementById('sex')
            var record = abc.value
            alert(record)
        }
    </script>
</head>
<body >
    <div align="center"> 
      <form action="a.html" method="post">
        <select name="sex" id="sex">
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
        <button onclick="fun()">按钮</button>
      </form>
    </div>
</body>
</html>

1.3.4 单选按钮

<!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>主题</title>
</head>
<body >
    <div align="center"> 
      <form action="a.html" method="post">
        男<input type="radio" name="sex" checked value="男">
        女<input type="radio" name="sex" value="女">
      </form>
    </div>
</body>
</html>

1.3.5 复选框

<!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>主题</title>
</head>
<body >
    <div align="center"> 
      <form action="a.html" method="post">
        <input type="checkbox" checked>
        <input type="checkbox">
        <input type="checkbox">
      </form>
    </div>
</body>
</html>

1.3.6 文本域

<!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>主题</title>
</head>
<body >
    <div align="center"> 
      <form action="a.html" method="post">
        <input type="" ><br>
        <textarea name="" id=""></textarea>
      </form>
    </div>
</body>
</html>

1.3.7 隐藏域

<!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>主题</title>
</head>
<body >
    <div align="center"> 
      <form action="a.html" method="post">
        <input type="hidden" name="id" value="1001">
        <input type="" ><br>
      </form>
    </div>
</body>
</html>

1.4 SEO优化

1.4.1 seo

  • 全称：Search English Optimization，搜索引擎优化。自从有了搜索引 擎，SEO便诞生了。

1.4.2 SEO优化之HTML标签

  • HTML代码一直是搜索引擎抓取的重点。搜索引擎会将HTML中的某些 元素标签作为影响网页排名的重要依据 ³ HTML代码的几个优化重点。 ³ 1.Title 标签 ³ Title 标签能够告诉用户和搜索引擎网页页面的主题思想是什么，一直 是搜索引擎的抓取重点。通常，搜索引擎抓取Title标签出于两个目的： 作为影响网页排名的重要因素和作为搜索结果页面的显示信息。不管是 哪一个目的，对我们做SEO来说都非常重要。 ³ 一般来说，Title标签中的单词最好保持在3~6个左右，最好包含关键字 。但Title标签中的单词不要全部都是关键字，因为这样可能会造成页面 关键字堆砌，导致过度优化。所选单词应简洁明了、具有描述性，要与 网页内容具有很大的相关性，并且每个不同的页面都应该包含Title标签.
  • 2.Meta Description标签 ³ 对Title标签优化之后，接下来就是对Meta Description标签的优化。 Meta Description标签可以说是对Title标签的进一步解释，可以是一句 话或者是包含十几个单词的短语。每个页面都该有其自己的Meta Description标签，并且Meta Description标签还可包含一些与网站内容 相关但Title标签中未提及的信息。与Title标签要求相似，该部分内容也 应具有描述性，与网页内容具有相关性，可包含关键字，但不可过多。
  • 3.Heading标签 ³ Heading标签包含了H1、H2、H3等等，是搜索引擎识别页面信息的重 要标记。合理使用H1、H2、H3等不同级别的标签能够使得页面结构更 加清晰，有利于搜索引擎的抓取。H1、H2、H3等标签是按照重要程度 来排名的。一般一个页面按照需求程度来适当添加该标签：从H1开始 ，依次往下添加。但不可添加太多Heading标签，否则会适得其反。

第二章 html5&第三章CSS

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布