HTML的简单了解

龙洋静

已于 2022-10-25 18:25:07 修改

阅读量711

点赞数

分类专栏：前端文章标签： servlet html 前端

于 2022-10-25 15:31:52 首次发布

本文链接：https://blog.csdn.net/LYJbao/article/details/127508445

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

2.10.1、input单行文本输入与选择标签

1、HTML结构

1.1、HTML文件基本结构

<html>
    <head>
        <title>Document</title>
    </head>
    <body>
       入门学习——hello world
    </body>
</html>

html标签是整个html文件的根标签（最顶层标签）
head标签中写页面的属性
body标签中写页面上显示的内容，文档主体元素
title标签中写的是页面的标题

title：

1.2、标签层次结构——元素关系

父子关系
兄弟关系

<html>
    <head>
        <title>基本框架</title>
    </head>
    <body>
       入门学习——hello world
    </body>
</html>

这里：

head和body是html的子标签（html是head、body的父标签）
title是head的子标签，head是title的父标签
head和body就是兄弟关系

标签与标签之间就形成了n叉树

1.3、快速生成代码框架

创建一个xxx.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>Document</title>
</head>
<body>
    
</body>
</html>

代码说明：

<!DOCTYPE html> 称为 DTD ( 文档类型定义 ), 描述当前的文件是一个 HTML5 的文件 .

<html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面"，将en更改为zh-CN就更改为“中文页面”啦！ (有些浏览器会根据此处的声明提示是否进行自动翻译).
<meta charset="UTF-8"> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放.

2、HTML常见标签

2.1、注释标签

<!-- 注释标签 -->

快捷键：ctrl+/

2.2、标题标签:h1-h6

    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>

2.3、段落标签:p

举例：

    <p> 不如安静下来，听一听内心的呢喃——那些蛰伏在角落里的声音，或许才是灵魂的梵音，让你看淡很多悲伤，给予你更从容的力量。</p>　　
    <p>如果你斤斤计较于一时的得失，那么他便真正的“失”了；如果你耿耿于怀于外在的成败，那么你离内心会愈来愈远；如果你甘于低头盲目追求当下，那么你会错过更多。</p>
    <p>春花秋月何时了。吟诗作赋，对酒当歌，谁不希望沉浸在诗意般的人生里？可是，执着的追求过后，恐怕只剩凄美的喟叹：“问君能有几多愁，恰似一讲春水向东流！”在低头盲目求索时，怎不抬头望一眼？望一眼辽阔的国土，天下的子民——那些生命中无法忘怀之轻，究竟辛酸了多少人的眼泪！</p>　　
    <p>“如果有来生，要做一只鸟，飞越永恒，没有迷途的苦恼。”我们都渴望有一颗忘忧草。希冀自己会更无悔地跋涉在人生的旅途上，遇到冰心所写的旖旎风景，可是我们如此的浮躁，去哪里能瞥到一路花开？那穿枝拂叶的人们，有泪可落，而我们却只有感伤。</p>

效果：

p标签：

p 标签之间存在一个空隙
当前的 p 标签描述的段落, 前面还没有缩进.
自动根据浏览器宽度来决定排版.
html 内容首尾处的换行, 空格均无效.
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格.

2.4、换行标签:br

br 是 break 的缩写 . 表示换行 .

注意：

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/> 是规范写法. 不建议写成

举例：

<p> 不如安静下来，听一听内心的呢喃——那些蛰伏在角落里的声音，或许才是灵魂的梵音，<br> 让你看淡很多悲伤，给予你更从容的力量。</p>

效果：

2.5、格式化标签

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
<img src="rose.jp

效果：

2.6、图片标签:img

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

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中 .（路径问题，和之前的文件I/O

操作一样）

img 标签的其他属性

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
border: 边框, 参数是宽度的像素. (但是一般使用 CSS 来设定.)

举例：

<img src="bjt.jpg" alt="小白" title="白敬亭-男神~" width="500" border="10">

注意:

属性可以有多个, 不能写到标签之前
属性之间用空格分割, 可以是多个空格, 也可以是换行.
属性之间不分先后顺序
属性使用 "键值对" 的格式来表示.

2.7、超链接标签:a

href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

链接的几种形式:

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

内部链接: 网站内部页面之间的链接. 写相对路径即可.

空链接: 使用 # 在 href 中占位.
下载链接: href 对应的路径是一个文件. (可以使用zip文件）

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

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

举例：

    <a href="http://www.baidu.com">百度</a><br>
    <a href="LYJ.html">点击这里跳转到LYJ.html</a><br>
    <a href="#">空连接</a><br>
    <a href="test.zip">下载链接</a><br>
    <a href="http://www.baidu.com"><img src="bjt.jpg" alt="" width="200"> </a><br>
    <a href="#one">目录一</a>
    <a href="#two">目录二</a>
    <a href="#three">拓展</a>
    <p id="one">
        <h2>目录一：</h2>
        内容一：<br>
        内容二：<br>
        ...
        
    </p>
    <p id="two">
        <h2>目录二：</h2>
        内容一：<br>
        内容二：<br>
        ...
    </p>
    <p id="three">
        <h2>拓展：</h2>
        拓展一：<br>
        拓展二：<br>
        ...
    </p>

效果：

禁止 a 标签跳转 : <a href="javascript:void(0) ; "> 或者 <a href="javascript: ; ">

2.8、表格标签

基本使用

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.

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

这些属性都要放到 table 标签中 .

align 是表格相对于周围元素的对齐方式 . align="center" ( 不是内部元素的对齐方式 )

border 表示边框 . 1 表示有边框 ( 数字越大 , 边框越粗 ), "" 表示没边框 .

cellpadding: 内容距离边框的距离 , 默认 1 像素

cellspacing: 单元格之间的距离 . 默认为 2 像素

width / height: 设置尺寸 .

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500"             height="500">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>如花</td>
            <td>女</td>
            <td>20</td>
        </tr>
    </table>

效果：

2.9、列表标签

列表主要分为有序列表，无序列表和自定义列表，无序列表使用标签ul来表示，有序列表使用标签ol来表示，列表里面每行的内容使用li来表示，自定义列表使用dl来表示，自定义列表可以设置一个小标题，使用dt来表示，列表中的内容使用dd来表示。

<!DOCTYPE html>
<html lang="ch">
<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>
    <h3>无序列表</h3>
    <ul>
        <li>java</li>
        <li>go</li>
        <li>python</li>
        <li>c++</li>
        <li>c</li>
    </ul>

    <h3>有序列表</h3>
    <ol>
        <li>java</li>
        <li>go</li>
        <li>python</li>
        <li>c++</li>
        <li>c</li>
    </ol>
</body>
</html>

效果：

2.10、表单标签

表单标签是HTML中与用户进行交互的重要手段，大部分的HTML标签都是展示的作用，而表单标签可以让用户进行输入操作。form标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。

2.10.1、input单行文本输入与选择标签

form就是一个表单标签，借助这个标签可以让用户输入数据，form里面可以存放一些与用户交互的组件，其中在form里面存放input标签就可以实现用户输入，比如登录输入账号与密码，注意input标签是单标签。

在input标签中常用的属性有：type表示文本框的类型，比如text表示普通文本，单行文本框，password表示密码框，用户看不到自己输入的内容，它也是单行文本框，name表示文本框的名字，id表示文本框的id等。

    <h3>登录</h3>
    <form>
        账号：<input type="text"><br>
        密码：<input type="password"><br>
    </form>

账号登录

除此之外，当type的值为radio表示单选框，也是独占一行的。比如性别选择框。

    <h3>单选框</h3>
    <form>
        <input type = "radio">男
        <input type = "radio">女
    </form>

但是我们发现这个单选框，可以多选，并且选了之后再点一下无法取消。对于上面的情况，我们可以使用name属性，使两个单选框只能同时被选中一个，这样选择一个选项，另一个选项会被取消勾选。

    <h3>单选框</h3>
    <form>
        <input type = "radio" name="sex-select">男
        <input type = "radio" name="sex-select">女
    </form>

我们还可以添加checked属性增加默认选中的一个功能。

    <h3>单选框</h3>
    <form>
        <input type = "radio" name="sex-select">男
        <input type = "radio" name="sex-select" checked ="checked">女
    </form>

有时候那个小圆点比较小，当在手机上进行点击时很难点到这个小圆点，为了解决这个问题，我们可以使用label标签来实现点击文字也能选中的功能。
然后label里面有一个for属性，可以给for属性赋予文本输入框的id，这样它就知道，是要为哪一个文本框实现点击文字等选中功能。

    <h3>单选框</h3>
    <form>
        <input type = "radio" name="sex-select" id="man">
        <label for="man">男</label>
        <input type = "radio" name="sex-select" id="woman" checked ="checked">
        <label for="woman">女</label>
    </form>

对于id属性，HTML中任何元素都可以指定id，并且一个HTML文件中，每个元素的id不能相同，所以我们可以通过id来寻找某一元素。

既然有单选框，那么肯定也有复选框（多选框）,type属性设置为checkbox就表示复选框。

    <h3>复选框：请问100=?</h3>
    <form>
        <input type="checkbox">A.50+50<br>
        <input type="checkbox">B.50*2<br>
        <input type="checkbox">C.1000/10<br>
        <input type="checkbox">D.200-100
    </form>

复选框

同理，复选框也可以设置checked属性为checked表示默认选项。

    <h3>复选框：请问100=?</h3>
    <form>
        <input type="checkbox" checked="checked">A.50+50<br>
        <input type="checkbox">B.50*2<br>
        <input type="checkbox">C.1000/10<br>
        <input type="checkbox">D.200-100
    </form>

同理，复选框也可以搭配label来使用，和单选框一样。

除了文本框，多选框和单选框，还能实现按钮功能，具体用法如下：

<!-- html中""与''作用一样，如果引用内容有双引号，外面引号使用单引号，反之亦然，如果都有就需要转义字符了。 -->
    <h3>按钮</h3>
    <form>
        <input type="button" value= "这是一个按钮" onclick="alert('不要点我')">
    </form>

除此之外直接使用button标签页可以实现按钮效果。

<button onclick="alert('快来点我')">这是另一个按钮</button>

如果需要选择文件，上传文件，可以设置type属性为file【上传文件需要实现服务端才能实现】

2.10.2、select下拉菜单标签

表单标签除了input单行文本输入和选择标签，还有select选择标签，可以实现下拉菜单功能或者选择日期的功能。

    <h3>选择日期</h3>
    <form>
        <select>
            <option value="please">--请选择--</option>
            <option value="1.1">2022年1月1日元旦节</option>
            <option value="2.1">2022年2月1日春节</option>
            <option value="2.15">2022年2月15日元宵节</option>
            <option value="3.12">2022年3月12日植树节</option>
            <option value="4.1">2022年4月1日愚人节</option>
            <option value="5.1">2022年5月1日劳动节</option>
            <option value="6.1">2022年6月1日儿童节</option>
            <option value="7.1">2022年6月3日端午节</option>
        </select>
    </form>

2.10.3、textarea标签

对于多行的文本输入框可以使用textarea标签来实现，cols属性表示显示出的列数，rows表示显示出的行数，其实就是设置文本框大小使用的，基本用法：

    <h3>多行输入框</h3>
    <form>
        <textarea cols="50" rows="10"></textarea>
    </form>

多行输入框

当然这些输入文本框和选择提交按钮，没有在form标签里也是可以正常显示的，只不过无法向服务器（后端）发送交互数据了。

2.11、分节元素

h1~h6也是分节元素

1、hgroup节的标题组

hgroup不是标题，是包含一组h1-h6元素的容器
常用于包含副标题

    <hgroup>
        <h1>HTML</h1>
        <h2>哈哈哈</h2>
    </hgroup>

2、header节头部

页面的头部：body的子元素，包含网站名
节的头部：article的子元素，包含标题、作者、发布日期等。

作为section子元素，包含区块的标题

<body>
    <header>
        <h1>个人网站</h1>
        <img src="bjt.jpg" alt="">
    </header>
</body>

2.11.3、nav导航节

页面中主要导航链接区域
用于顶部导航（header内或外）、页面导航（目录）、侧栏导航、翻页等

2.11.4、footer节尾部

页面的底部：作为body子元素，包含服务条款。版权信息等
节的底部：作为article子元素，包含发布信息、文章分享、下一篇等

2.11.5、article独立节

网页中完整独立可分发或重用的结构

2.11.6、section主题节

网页中划分内容主题的通用节
用途：章节、页面各部分、文章评论区域
区别：section、article含有标题h1~h6，article是独立节，section是内容的子主题节div用于无标题的区域

2.11.7、aside侧边栏节

表示周围分节松散相关的节

2.11.8、address节的联系信息

联系信息：微博、网址、微信号、邮箱等

    <footer>
        <address>
            <p>官微 <a href="wb.com">@西文理</a></p>
            <p>电话：123456</p>
        </address>
        <p>地址：陕西省西安市</p>
    </footer>