快速上手HTML5

云浮万里_1

已于 2024-06-16 18:08:05 修改

阅读量1.6k

点赞数 43

分类专栏： web前端开发文章标签： html 前端

于 2024-02-03 22:28:34 首次发布

本文链接：https://blog.csdn.net/weixin_74889578/article/details/136008717

版权

web前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

前些日子发了个帖子想问问双非本科人工智能的出路，得到的回答基本都是卷算法很难，因为好企业大多要双985科班生、甚者985硕也走不了几个算法岗，所以要趁早转开发写项目找实习。

所说的开发指的是后端前端测试运维，难度递减，我就捡了个好上手的先学着~这里仅把知识点进行了汇总记录，方便日后查阅。

编辑器VS Code：

Visual Studio Code - Code Editing. Redefined

1. HTML5介绍

HTML即超文本标记语言，是描述网页的一种标记语言，而不是编程语言。HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

<!DOCTYPE html>,网页的必备成分，位于文档最前面，避免浏览器怪异问题

2. 基本骨架

五个标签：

html：定义HTML文档，限定开始点结束点。
head：描述文档的属性信息
title:有<head>必须写<title>,有利于SEO优化,是搜索引擎优化的英文缩写通过对网站内容调整满足搜索引擎的排名需求(搜索一个东西网页的排名有前有后)
meta:meta标签描述了一些基本的元数据，不显示在页面上，但会被浏览器解析。一般放置于 <head> 区域
body：定义文档主体，包含如文本超链接图像表格列表等
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下</title>
</head>

<body>
   欢迎
</body>

</html>

3. HTML基础

下面内容均写在<body></body>内

标题：

<body>
  <h1 align="center">一级</h1>
  <h2 align="right">二级</h2>
  <h3 align="left">三级</h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>

</body>

段落：

<!-- 标签之段落、换行、水平线 -->
    <p>段落文本标签</p>
    <p>换行标签<br>换行标签</p>
    <hr color="black" width="300px" size="5px" align="">

图像、超链接：

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<img src="C:\Users\Pictures\Saved Pictures\下载 (5).png" alt="只是一个图片" width="300px" height="" title="图片">
    <a href="https://www.bilibili.com/"><br>点击跳转</a>
    <a href="https://wenku.baidu.com/">
        <br><img src="./1.webp" width="100px" title="点击跳转百度">
    </a>

效果：

文本格式化标签：

 <!-- 标签之文本，常用文本标签，与段落标签太同，段落为一段文本 -->
    <br><em>着重文字</em>
    <b>粗体文字</b>
    <i>斜体文字</i>
    <strong>加重语气</strong>
    <del>删除字</del>
    <span>无特定含义</span>

列表：

 <!-- 列表标签之有序列表，默认123，可嵌套 -->
    <ol type="A">
        <li>季节</li>
        <ol>
            <li>春</li>
            <li>夏</li>
            <li>秋</li>
            <li>冬</li>
        </ol>
    </ol>
    <!-- 无序列表，默认黑实心圆,可嵌套 -->
    <ul>
        <li>红</li>
        <li>橙</li>
        <li>黄</li>
    </ul>

表格：

 <!-- 标签之表格，tr行、td列 -->
    <table border="1" width="400px" height="100px">
        <tr>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
    <!-- 表格单元格合并 -->
    <p>水平合并单元格4、5:colspan,保留左边</p>
    <p>垂直合并7、8:rowspan,保留上边，上下左右保留左上</p>
    <table border="1" width="400px" height="100px">
        <tr>
            <td colspan="2" rowspan="2">单元格1、2、4、5</td>
            <!-- <td>单元格2</td> -->
            <td>单元格3</td>
        </tr>
        <tr>
            <!-- <td colspan="2">单元格4</td> -->
            <!-- <td>单元格5</td> -->
            <td rowspan="2">单元格6、9</td>
        </tr>
        <tr>
            <td>单元格7</td>
            <td>单元格8</td>
            <!-- <td>单元格9</td> -->
        </tr>
    </table>

Form表单：

<!-- Form表单：让网站具有交互性 -->
    <form>
        <input>
        <input type="submit">
    </form>
    <!-- 表单元素 -->
    <form>
        用户名：<input type="text">
        密码： <input type="password">
        <input type="submit" value="登录">
    </form>

表单元素：

输入域<input>
文字域<textarea></textarea>
选择域<select> <option></option></select>

块级元素和内联元素：

 <!-- 块元素和行内元素（内联元素） -->
    <div>
        <h1>标题</h1>
        <p>段落</p>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
        </ul>
        <a href="#">超链接</a>
        <span>内容</span>
        <em>注重语气</em>
    </div>

常见块元素：

div、form、h1~h6、hr、p、table、ul

常见行内元素：

a、b、em、i、span、strong

行内块级元素：可设置宽高的行内元素

img、button、input等

HTML5新增标签：即id后的内容

注意：div不是新增标签

  <!-- 传统的：div:容器标签（分区域） -->
    <div id="header"></div>
    <div id="nav"></div>
    <div id="article">
        <div id="section"></div>
    </div>
    <div id="slider"></div>
    <div id="footer"></div>
   <!-- 上面的id都单独成了标签，但14年之前的浏览器网页仍用传统方法 -->
   <header></header>
   <nav></nav>
   <section></section>
   <aside></aside>