HTML概述、vscode安装与使用、HTML基本结构与属性、文本、图片、跳转、跳转、表格、表单等

最新推荐文章于 2023-03-07 18:07:59 发布

梦世

最新推荐文章于 2023-03-07 18:07:59 发布

阅读量391

点赞数 2

分类专栏： # HTML

本文链接：https://blog.csdn.net/qq_34949782/article/details/106482214

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Web概述

HTML概述

工程师职业发展

vscode安装与使用

安装

下载地址：https://code.visualstudio.com/

安装插件（安装中文插件）：

安装open inbrowser、view in brower

自动换行

快捷键

web前端的三大核心技术

HTML：结构

CSS：样式

JavaScript：行为

HTML基本结构与属性

HTML：超文本标记语言

超文本：如：文本、语音、视频等
标记：<单词>，也叫做标签；

|- 写法分为两种：

|- 单标签 <input type="text">

|- 双标签 <header></header>

|- 标签可以嵌套

|- 标签的属性：用来修饰标签的，设置当前标签的一些功能；

|- <标签属性1=“值2”，属性2=“值2”......>

语言：编程语言

范例：第一个代码

<header>hello world</header>

<footer>hi HTML</footer>

范例：标签嵌套


<header>
    hello world
    <div>aaaa1</div>
        aaaa1
        <div>bbbb</div>
    <div>aaaa2</div>
</header>

范例：标签属性

<header title="hello">hello world</header>

<footer title="hi">hi HTML</footer>

HTML初始代码

初始代码

为了规范每个.html都必须要有的代码，称之为初始代码：

<!DOCTYPE html>    文档声明，告诉浏览器这是一个HTML文件
<html lang="en">   HTML文件的最外层标签，包裹所有代码，例如lang="en"表示英文的网站，lang="zh-CN"表示中文网站
    <head>  
        <meta charset="UTF-8">  元信息：是编写网页中的一些赋值信息
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>  设置网页的标题
    </head>
    <body>
        显示内容的区域
    </body>
</html>

通过！+ tab 建立

HTML注释

写法如下：

<!--这是注释内容-->

HTML语义化

所谓的HTML语义化指的是根据网页中内容的结构，选择合适的标签进行编写。

文本修饰标签

标题与段落

标题是双标签，分为六个等级：<h1></h1> ... <h6></h6>。在网页中h1标题最重要，并且一个.html中只能有一个，h5、h6一般不用；

段落是双标签：<p></p>

范例：标题

<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>

范例：段落

<body>
    <h1>标题1</h1>
    <p>这是一个段落</p>
</body>

强调（双标签）：

加粗：<strong></strong>
斜体：<em></em>

下标文本与上标文本（双标签）：<sub>、<sup>

删除文本与插入文本（双标签）：<del>、<ins>

范例：强调

<body>
    <h1>标题</h1>
    <p>这是一个段落</p>
    <p>
        <strong>这是strong强调的文本</strong>
    </p>   
    <p>
        <em>这是em强调的文本</em> 
    </p>
    <p>
        下标：a<sub>1</sub>+b<sub>1</sub>=c<sub>1</sub>
    </p> 
    <p>
        上标：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
    </p>
    <p>
        促销：原价<del>300</del>，现价<ins>200</ins>
    </p>
</body>

需要注意的是，strong的强调性更强。一般情况下删除都是和插入配合使用的。

特殊符号

图片标签与属性

图片标签（单标签）：<img>，属性有：

src：引入图片的地址，网络连接地址或者本地文件地址
alt：当图片显示出现问题时，显示一段提示的文字
title：提示信息
width、height：图片大小

范例：图片网络地址

<body>
    <img src="http://cms-bucket.ws.126.net/2020/0601/bf89f113j00qb81yc0024c000f000jmc.jpg" alt="图片显示出错" title="这是提示信息" width="200" height="200">
</body>

范例：图片文件本地地址

<body>
    <img src="./cat.jpg" alt="图片显示出错" width="100" height="147.2" title="cat">
</body>

、

跳转

跳转连接

连接标签(双标签)：<a></a>，常用属性：

herf：跳转的连接地址
target：可以改变连接的方式，默认情况下是在当前页面打开_sef，新窗口打开_blank

改变标签的默认行为（单标签）：base，一般写到head之中，一起改变；

范例：跳转连接

<body>
    <p>
        <a href="https://www.baidu.com">访问百度！</a>
    </p>
    <p>
        <a href="https://cn.bing.com/" target="_bank">
            <img src="./cat.jpg" alt="图片显示出错!" width="100" height="147.2" title="cat">
        </a>
    </p>
</body>

范例：base

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=0, initial-scale=1.0">
    <title>Document</title>
    <base target="_blank">
</head>
<body>
    <p>
        <a href="https://www.baidu.com">访问百度！</a>
    </p>
    <p>
        <a href="https://cn.bing.com/">
            <img src="./cat.jpg" alt="图片显示出错!" width="100" height="147.2" title="cat">
        </a>
    </p>
</body>
</html>

跳转锚点

跳转锚点有两种实现方式：

实现一：#号 id属性
实现二：#号 name属性

范例：跳转锚点

<body>
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#javascript">JavaScript</a>

    <h2 id="html">HTML超文本</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <a name="css"></a>
    <h2>CSS</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <h2 id="javascript">JavaScript</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
</body>

列表

列表标签

列表标签（双标签）：

无序列表：<ul></ul> <li></li> 它们之间不允许有其他的标签。同时提供有type属性：改变前面的标记样式（一般通过CSS去控制）
有序列表：<ol></ol> <li></li> 用的非常少

定义列表，对列表项添加标题对标题进行描述的内容：

<dl>：定义列表
<dt>：定义专业术语或名词
<dd>：对名词进行解释或描述

例如：

<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>

嵌套列表：列表之间可以相互嵌套形成多层级的列表。

范例：列表标签


<body>
    <ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>
    <ul type="circle">
        <li>第一项</li>
        <li>第二项</li>
    </ul>
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
</body>
</html>

范例：定义列表

<body>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>JavaScript</dt>
        <dd>网页脚本语言</dd>
    </dl>
</body>

范例：嵌套列表

<body>
    <ul>
        <li>
            四川
            <ul>
                <li>成都</li>
                <li>内江</li>
                <li>攀枝花</li>
            </ul>
        </li>
        <li>
            云南
            <ul>
                <li>昆明</li>
                <li>昭觉</li>
            </ul>
        </li>
    </ul>
</body>

注意使用工具：

创建多个<li></li>

表格

表格标签

<body>
   <table>
       <caption>天气预报</caption>
       <tHead>
            <tr>
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
       </tHead>
       <tBody>
            <tr>
                <td>2020-5-20</td>
                <td><img src="./weather1.png" alt="图片显示出错"></td>
                <td>适合出行</td>
            </tr>
            <tr>
                <td>2020-5-21</td>
                <td><img src="./weather2.png" alt="图片显示出错"></td>
                <td>不适合出行</td>
            </tr>
       </tBody>
       <tFood>
           
       </tFood>
   </table>
</body>

需要注意的是：在一个table中，tBoody是可以出现多次的，但是tHead、tFood只能出现一次

表格属性

align值：left、center、right

valign值：top、middle、bottom

范例：表格

<body>
   <table border="1" cellpadding="30" cellspacing="30" >
       <caption>天气预报</caption>
       <tHead>
            <tr align="right" >
                <th colspan="2">日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
       </tHead>
       <tbody>
            <tr valign = "top">
                <td rowspan="2">2020-5-20</td>
                <td>白天</td>
                <td><img src="./weather1.png" alt="图片显示出错"></td>
                <td>适合出行</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./weather1.png" alt="图片显示出错"></td>
                <td>适合出行</td>
            </tr>
            <tr>
                <td rowspan="2">2020-5-21</td>
                <td>白天</td>
                <td><img src="./weather2.png" alt="图片显示出错"></td>
                <td>不适合出行</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./weather2.png" alt="图片显示出错"></td>
                <td>不适合出行</td>
            </tr>
       </tbody>
       <tFood>

       </tFood>
   </table>
</body>

表单

表单标签

范例：表单标签

<body>
    <form >
        <h2>输入框</h2>
        <input type="text">
        <h2>密码框</h2>
        <input type="password">
        <h2>复选框</h2>
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮与重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>

范例：改进

<body>
    <form >
        <h2>输入框</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框</h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框</h2>
        <input type="checkbox" checked="checked">苹果
        <input type="checkbox" disabled>香蕉
        <input type="checkbox">葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件</h2>
        <input type="file">
        <h2>提交按钮与重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>

表单相关标签

<body>
    <form >
        <h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>
        <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <select size="2">
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <select multiple>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>

        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>

    </form>
</body>

表格表单组合实例

<body>
    <form>
        <table border="1"  cellpadding="30">
            <tBody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码</td>
                    <td><input type="password" placeholder="输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tBody>
        </table>
    </form>
</body>

块与内联

范例：<div>与<span>

<body>
    <div style="border:1px gray solid;">
        <h2><a href="#">学海<span style="color:red">无涯</span>苦作舟</a></h2>
        <a href="#"><img src="./weather1.png" alt=""></a>
        <p>
            小鸟学飞。《礼记·月令》：“鹰乃学习。” 陈澔集说：“学习，雏学数飞也。”
            《史记·秦始皇本纪》：“士则学习法令辟禁。”
  
        </p>
        <a href="#">www.baidu.com</a>
    </div>
    <div>
        <h2><a href="#">学如逆水行舟，<span>不进则退</span></a></h2>
        <a href="#"><img src="./cat.jpg" alt="" width="100" height="137.2"></a>
        <p>
            狭义：通过阅读、听讲、研究、观察、理解、探索、实验、实践等手段获得知识或技能的过程，是一种使个体可以得到持续变化（知识和技能，方法与过程，情感与价值的改善和升华）的行为方式。
        </p>
        <a href="#">www.baidu.com</a>
    </div>
</body>

梦世

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML概述、vscode安装与使用、HTML基本结构与属性、文本、图片、跳转、跳转、表格、表单等

目录Web概述HTML概述工程师职业发展vscode安装与使用安装快捷键HTML基本结构与属性HTML初始代码初始代码HTML注释HTML语义化文本修饰标签标题与段落特殊符号图片标签与属性跳转跳转连接跳转锚点列表列表标签表格表格标签表格属性表单表单标签表单相关标签表格表单组合实例块与内联Web概述HTML概述工程师职业发展..
复制链接

扫一扫