【HTML】

目录

1. 什么是 HTML ?HTML 的作用

2. HTML 常见标签

2.1 注释标签

2.2 标题标签:h1 - h6

2.3 段落标签:p

2.4 换行标签:br

​编辑

2.5 格式化标签

2.6 图片标签:img

2.7 超链接标签:a

2.7.1 外部链接:href 引用其他网站的地址

​编辑

2.7.2 锚点链接: 可以快速定位到页面中的某个位置

2.8 表格标签

2.9 列表标签

2.9.1 无序列表

2.9.2 有序列表

2.9.3 自定义列表

2.10 表单标签

2.10.1 form 标签

2.10.2 input 标签

 3 HTML 的综合练习——在线简历


1. 什么是 HTML ?HTML 的作用

HTML 的全称是 "Hyper Text Markup Language",超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本,HTML 命令可以说明文字,图形、动画、声音、表格、链接等。

本篇文章使用 Visual Studio Code 来写 HTML 。

在 vscode 中,使用 html : 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>Document</title>
</head>
<body>
    
</body>
</html>

默认设置:

语言:英语

字符集: UTF - 8 

浏览器:edge

html 标签是整个 html 文件的根标签(最顶层标签)

head 标签中写页面的属性

body 标签中写的是页面上显示的内容

title 标签中写的是页面的标题

上述四对标签中,标签之间的关系,可以用父子标签与兄弟标签来描述。head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签),title 是 head 的子标签。head 是 title 的父标签。head 和 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>我的第一个 html 网页</title>
</head>
<body>
    你好 世界 
    <p></p>
    欢迎来到新世界
</body>
</html>

 和程序相关的一切,都不能是中文,否则会出现错误。只有注释才能写中文。

2. HTML 常见标签

2.1 注释标签

注释不会显示在界面上。目的是提高代码的可读性。语法格式:

<!-- 注释 -->

......
<body>
    你好 世界 
    <!-- 你好世界!!我来拉!!-->
    欢迎来到新世界
</body>
......

注释的原则

要和代码逻辑一致

尽量使用中文

不要传递负能量

2.2 标题标签:h1 - h6

标题标签有六个,数字越大,字体越小:

    <h1>hello</h1>
    <h2>hello</h2>
    <h3>hello</h3>
    <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>

2.3 段落标签:p

 p 标签表示一个段落。其语法格式为:

<p> 这是一个段落 </p>

 注意事项:

p 标签之间存在一个空隙

当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)

自动根据浏览器宽度来决定排版

html 内容首尾处的换行, 空格均无效

在 html 中文字之间输入的多个空格只相当于一个空格

html 中直接输入换行不会真的换行, 而是相当于一个空格

2.4 换行标签:br

br 是 break 的缩写,表示换行。br 是一个单标签(不需要结束标签) 。br 标签不像 p 标签那样带有一个很大的空隙。<br/> 是规范写法。不建议写成 <br>。

在 cvcode 中,手动给文章分段分行,但在网页中并不会显示分段分行,这就需要上一节与这节用到的段落标签 p 以及换行标签 br 了。

    自1990年以来,HTML就一直被用作万维网的信息表示语言,使用HTML描述的文件需要通过web浏览器显示出效果。
    HTML是一种建立网页文件的语言,通过标记式的指令(Tag),将文字,图形、动画、声音、表格、链接、影像等内容显示出来。
    事实上,每一个HTML文档都是一种静态的网页文件,
    这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,
    只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。
    HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题,
    从一个页面跳转到另一个页面,与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。
    HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。 [2]
   
    万维网(world wide web,简称www)上的一个超媒体文档称之为一个页面(外语:page)。
    作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),
    所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。
    在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。
    超文本标记语言(英文缩写:HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 [3]

 

 但在使用段落标签以及分行标签之后:

    自1990年以来,HTML就一直被用作万维网的信息表示语言,使用HTML描述的文件需要通过web浏览器显示出效果。</br>
    HTML是一种建立网页文件的语言,通过标记式的指令(Tag),将文字,图形、动画、声音、表格、链接、影像等内容显示出来。</br>
    事实上,每一个HTML文档都是一种静态的网页文件,</br>
    这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,</br>
    只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。</br>
    HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题,</br>
    从一个页面跳转到另一个页面,与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。</br>
    HTTP的制定使浏览器在运行超文本时有了统一的规则和标准。 [2]
    <p></p>
    万维网(world wide web,简称www)上的一个超媒体文档称之为一个页面(外语:page)。</br>
    作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),</br>
    所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。</br>
    在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。</br>
    超文本标记语言(英文缩写:HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 [3]</br>

2.5 格式化标签

加粗:strong 标签 和 b 标签

倾斜:em 标签 和 i 标签

删除线:del 标签和 s 标签

下划线:ins 标签 和 u 标签

<em>超市</em> <strong>大甩卖!</strong> <b>全场商品</b> 不要<del>9.9折</del>,全场<ins>一折起!</ins>

<hr>

2.6 图片标签:img

img 标签必须带有 src 属性,表示图片的路径。

img 标签的其他属性:

alt:替换文本。当文本不能正确显示的时候, 会显示一个替换的文字。

title:提示文本。鼠标放到图片上, 就会有提示。

width/height:控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡。

border:边框, 参数是宽度的像素。 但是一般使用 CSS 来设定。

注意:

1. 属性可以有多个, 不能写到标签之前。

2. 属性之间用空格分割, 可以是多个空格, 也可以是换行。

3. 属性之间不分先后顺序。

4. 属性使用 "键值对" 的格式来表示。

关于目录结构: 对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好。

1) 相对路径:以 html 所在位置为基准, 找到图片的位置。

同级路径:直接写文件名即可 (或者 ./)

下一级路径: image/1.jpg

上一级路径: ../image/1.jpg

2) 绝对路径:一个完整的磁盘路径, 或者网络路径。例如

磁盘路径 D:\rose.jpg

网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

代码示例:

<!-- 相对路径 -->
<img src="mountain.jpg" title="山川" alt="这是一张山川的照片" width="300px" height="200"><br>
<hr>

<!-- 绝对路径 -->
    <img src="C:/Apps/html/mountain.jpg" title="山川湖泊" alt="这是一张风景图"  width="600px" height="400px"><br>
    <hr>

 如果把图片放到 Apps 这个文件夹中,与 html 这个文件同级,想读路径该如何写呢?

<!-- 相对路径 -->
    <img src="../mountain.jpg" title="山川" alt="这是一张山川的照片" width="300px" height="200"><br>

如果是网络图片呢?

<!-- 网络地址 -->
    <img src="https://upd10.sogoucdn.com/static/sogou/images/logo.png?v=1" title="sogou" alt="搜狗图标" width="400px" height="100px"><br>

2.7 超链接标签:a

2.7.1 外部链接:href 引用其他网站的地址

href:必须具备, 表示点击后会跳转到哪个页面。

target:打开方式,默认是 _self。如果是 _blank,则用新的标签页打开。

<h2>编程导航网站</h2>
    <a href="https://www.baidu.com/" target="_blank">百度</a>
    <a href="https://www.sogou.com/" target="_blank">搜狗</a>
    <a href="https://cn.bing.com/" target="_blank">必应</a>
    <p></p>

2.7.2 锚点链接: 可以快速定位到页面中的某个位置

<a href="#mountain">hello</a>, <a href="#sogou">world</a>
    <hr>

<!-- 网络地址 -->
    <a href="https://www.sogou.com/" target="_blank">
    <img id = "sogou" src="https://upd10.sogoucdn.com/static/sogou/images/logo.png?v=1" title="sogou" alt="搜狗图标" width="400px" height="100px"><br>
</a>

<!-- 相对路径 -->
    <img id = "mountain" src="../mountain.jpg" title="山川" alt="这是一张山川的照片" width="300px" height="200"><br>

2.8 表格标签

table 标签: 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

th: 表示表头单元格. 会居中加粗

thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)

tbody: 表格得到主体区域

table 包含 tr , tr 包含 td 或者 th。

 <table border="1" width ="400px" height = "200px">
        <thead>
            <th>
                姓名
            </th>
            <th>
                年龄
            </th>
            <th>
                性别
            </th>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>男</td>
            </tr>
            <tr>
                <td>莉丝</td>
                <td>45</td>
                <td>女</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>26</td>
                <td>男</td>
            </tr>
        </tbody>

    </table>

 如果信息相同,想要合并单元格,HTML 也提供了语法支持:

合并单元格:

跨行合并: rowspan="n"

跨列合并: colspan="n"

步骤

1. 先确定跨行还是跨列

2. 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)

3. 删除的多余的单元格

<table border="1" width ="400px" height = "200px">
        <thead>
            <th>
                姓名
            </th>
            <th>
                年龄
            </th>
            <th>
                性别
            </th>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td rowspan="2">28</td>
                <td>男</td>
            </tr>
            <tr>
                <td>莉丝</td>
                
                <td>女</td>
            </tr>
            <tr>
                <td colspan="2">王五</td>
                <td>男</td>
            </tr>
        </tbody>

    </table>

 

2.9 列表标签

2.9.1 无序列表

无序列表,unorderedlist。

<h3>西天取经(无序列表)</h3>
    <ul>
        <li>唐三藏</li>
        <li>孙悟空</li>
        <li>猪八戒</li>
        <li>沙和尚</li>
        <li>白龙马</li>
    </ul>

2.9.2 有序列表

有序列表,orderedlist。

<h3>事务具备以下四大特性(有序列表)</h3>
    <ol>
        <li>原子性</li>
        <li>持久性</li>
        <li>隔离性</li>
        <li>一致性</li>
    </ol>

2.9.3 自定义列表

自定义列表,dl,definitionlist,dt 则是 definitionterm 的缩写,而 dd 为 definitiondescription 的缩写。

<h3>自定义列表</h3>
    <dl>
        <dt>企鹅们的日常活动</dt>
        <dd>吃鱼</dd>
        <dd>睡觉</dd>
        <dd>打豆豆</dd>
    </dl>

2.10 表单标签

表单是让用户输入信息的重要途径。

分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签。

表单控件: 输入框, 提交按钮等. 重点是 input 标签。

2.10.1 form 标签

描述了要把数据按照什么方式,提交到哪个页面中。关于 form 需要结合服务器 & 网络编程来进一步理解。后面再详细研究。

2.10.2 input 标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框。

type(必须有),取值种类很多多, button, checkbox, text, file, image, password, radio 等。

name:给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一。

value:input 中的默认值。

checked:默认被选中. (用于单选按钮和多选按钮)

maxlength:设定最大长度

<form action="https://www.baidu.com"  method="get">
        <!-- 文本框 -->
        姓名:<input type="text" id="username" name="name"> <br>
        <!-- 密码框 -->
        密码:<input type="password"> <br>
        <!-- 单选框 -->
        性别:<input type="radio" name="sex" value="男">男 &nbsp&nbsp&nbsp
        <input type="radio" name="sex" value="女">女&nbsp&nbsp&nbsp
        <input type="radio" name="sex" value="第三性">第三性别
        <!-- 复选框 -->
        爱好:<input type="checkbox">散步&nbsp&nbsp&nbsp
        <input type="checkbox">打太极&nbsp&nbsp&nbsp
        <input type="checkbox">听音乐&nbsp&nbsp&nbsp<br>
        <!-- 普通按钮 -->
        <input type="button" value="按钮"><br>
        
        <!-- 头像 -->
        头像:<input type="file"><br>
        <!-- 选择框 -->
        大学:<select>
            <option>北京大学</option>
            <option selected="selected">清华大学</option>
            <option>陕西师范大学</option>
            <option>中山大学</option>
        </select><br>
        备注:<textarea rows="7" cols="100">
    
        </textarea><br>
        <!-- 提交按钮 -->
        <input type="submit" value="提交"><br>
        <!-- 清空按钮 -->
        <input type="reset" value="清空"><br>

        
    </form>
    <hr>

 3 HTML 的综合练习——在线简历


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值