【HTML基础】

犇犇犇犇犇犇

已于 2022-10-26 16:32:30 修改

阅读量320

点赞数

分类专栏： Java学习文章标签： html 前端 javascript

于 2022-10-26 16:31:25 首次发布

本文链接：https://blog.csdn.net/qq_57681480/article/details/127534827

版权

Java学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

HTML基础

HTML结构

认识HTML

HTML代码是由标签构成，形如

<positon>
    <province>
        湖北
    </province>
</positon>

标签position放在<>里
HTML中的标签都是设定好了的，有点像其它编程语言中的关键字
HTML的大部分标签都是成对出现，<>是开始标签，</>是结束标签
少数标签是单标签，只有开始标签
开始标签和结束标签之间是内容（湖北）
position，province是我随便打的不是真的HTML标签

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 id="myId">
    这里是hello
</body>
</html>

html标签是整个html文件的根标签，lang = ”en“表示语言是英语
head标签中写页面的属性
title标签中写页面标题
body标签中写页面的内容
其它不用管是HTML的各项配置
开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).

HTML常见标签

注释标签

<!-- 这是注释标签 -->

Ctrl+/是快速生成注释标签/取消注释

标题标签

有六个，从h1-h6，数字越大字体越粗，数字越小字体越小

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

段落标签：P

HTML被创建的目的就是为了在电脑上呈现报纸的效果，P标签就是报纸中分段的作用。

    <p>
        这是一个段落。Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ducimus velit fugiat iusto ea ut iste eligendi eaque numquam, laboriosam deleniti veniam distinctio consectetur omnis tenetur ratione sequi delectus repellat.
    </p>
    <p>
        这是一个段落。Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ducimus velit fugiat iusto ea ut iste eligendi eaque numquam, laboriosam deleniti veniam distinctio consectetur omnis tenetur ratione sequi delectus repellat.
    </p>
    <p>
        这是一个段落。Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ducimus velit fugiat iusto ea ut iste eligendi eaque numquam, laboriosam deleniti veniam distinctio consectetur omnis tenetur ratione sequi delectus repellat.
    </p>

在这里插入图片描述

如果不使用段落标签

<body>
        这是一个段落。Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ducimus velit fugiat iusto ea ut iste eligendi eaque numquam, laboriosam deleniti veniam distinctio consectetur omnis tenetur ratione sequi delectus repellat.
        这是一个段落。Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ducimus velit fugiat iusto ea ut iste eligendi eaque numquam, laboriosam deleniti veniam distinctio consectetur omnis tenetur ratione sequi delectus repellat.
        这是一个段落。Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ducimus velit fugiat iusto ea ut iste eligendi eaque numquam, laboriosam deleniti veniam distinctio consectetur omnis tenetur ratione sequi delectus repellat.
</body>

在这里插入图片描述

注意:

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

换行标签：br

这是一个单标签，没有结束标签，作用就是换行。在HTML中那种转义字符直接都被转换成字符了，所以某些转义字符的功能有一些特殊的标签代替。

<br/>是规范写法

格式化标签

加粗：strong和b标签
倾斜：em和i标签
删除线：del和s标签
下划线：ins和u标签
相同作用标签之间没有区别

<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

展示效果
在这里插入图片描述

图片标签：img

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

<img src="#">

路径分为两种：

绝对路径
- 磁盘路径：D://cat.jpg
- 网络路径：https://tse4-mm.cn.bing.net/th/id/OIP-C.JJNWfU2ZD8q7XLpywalwFgHaLG?w=121&h=181&c=7&r=0&o=5&pid=1.7
相对路径: 以 html 所在位置为基准, 找到图片的位置.
- 同级路径: 直接写文件名即可 (或者 ./)
- 下一级路径: image/1.jpg
- 上一级路径: …/image/1.jpg

img 标签的其他属性

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

<img src="d:/章鱼哥.jpg" alt="图片损坏" width="150px" height="200px" border="3">
<img src="d:/坤哥.gif" alt="坤哥" title="只因">

展示效果
在这里插入图片描述

超链接标签：a

超链接标签必须带有href属性，表示链接地址，点击后会跳转到哪个页面

链接的几种形式：

外部链接：href引用其它网站的地址
内部链接：网页内部页面之间的链接，写绝对地址就行
网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

<a href="https://www.baidu.com/">百度</a>
<a href="hello2.html">点击跳转到hello2</a>
<a href="https://www.baidu.com">
   <img src="d:/章鱼哥.jpg" alt="图片损坏" width="150px" height="200px">
</a>

在这里插入图片描述

表格标签

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

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

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.

align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸.

注意, 这几个属性, vscode 都提示不出来.

    <style>
        td{
            text-align: center;
        }
    </style>
    <table width="500" height="200" border="1">
        <tr>
            <th>
                序号
            </th>
            <th>
                姓名
            </th>
        </tr>
        <tr>
            <td>
                1
            </td>
            <td>
                Liu
            </td>
        </tr>
    </table>

在这里插入图片描述

列表标签

主要使用来布局的. 整齐好看.

无序列表[重要] ul li , .
有序列表[用的不多] ol li
自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕
着标题来展开的.

注意

元素之间是并列关系
ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd
li 中可以放其他标签.
列表带有自己的样式, 可以使用 CSS 来修改. (例如前面的小圆点都会去掉)

    <h3>无序列表</h3>
        <ul>
            <li>咬人猫</li>
            <li>兔总裁</li>
            <li>阿叶君</li>
        </ul>
    <h3>有序列表</h3>
        <ol>
            <li>咬人猫</li>
            <li>兔总裁</li>
            <li>阿叶君</li>
        </ol>
    <h3>自定义列表</h3>
        <dl>
            <dt>我的老婆们</dt>
            <dd>咬人猫</dd>
            <dd>兔总裁</dd>
            <dd>阿叶君</dd>
        </dl>

在这里插入图片描述

表单标签

form标签

描述了要把数据按照什么方式, 提交到哪个页面中。

input标签

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

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值.
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度

1.文本框

<input type="text">

2.密码框

<input type="password">

3.单选框

<input type="radio" name="gender">男
<input type="radio" name="gender" checked="checked">女

注意单选框的name必须相同，才能达到多选一的效果

4.复选框

<div>爱好：</div>
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打豆豆

5.普通按钮

<input type="button" value="这是按钮">

6.提交按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

当前按钮点了都没有反应要搭配CSS使用，提交按钮必须放到表单中，用action提交到哪。

7.清空按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

8.提交文件

<input type="file" value="提交文件">

展示效果
在这里插入图片描述

label标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验。

<input type="radio" name="gender" id="male"><label for="male">男</label>
<input type="radio" name="gender" checked="checked" id="female"><label for="female">女</label><br>

Select标签

select作用就是下拉选项（菜单）

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
    <option>广州</option>
    <option>深圳</option>
</select>

option 中定义 selected=“selected” 表示默认选中，没有selected时默认第一个选项。

Textarea标签

作用就是文本域，多行文本框

<textarea cols="30" rows="10">这里填写初始内容</textarea>

表单标签中的name，id属性我都没有展示出来，这两属性要搭配CSS使用。

无语义标签div&span

当你不知道用什么标签时就用这俩标签

div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子.

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

展示效果

在这里插入图片描述

HTML特殊字符

有些特殊的字符在 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>Resume</title>
</head>
<body>
    <h1>刘*豪</h1>
    <h2>基本信息</h2>
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.JJNWfU2ZD8q7XLpywalwFgHaLG?w=121&h=181&c=7&r=0&o=5&pid=1.7" alt="图片">
    <p>求职意向:Java开发工程师</p>
    <p>联系电话:136****7215</p>
    <p>邮箱:2636**@qq.com</p>
    <a href="https://gitee.com/dxl-tom">我的gitee</a>
    <br>
    <a href="https://blog.csdn.net/qq_57681480?spm=1011.2415.3001.5343">我的博客</a>
    <h2>教育背景</h2>
    <ol>
        <li>2008-2014 春日部小学</li>
        <li>2014-2017 春日部初中</li>
        <li>2017-2020 春日部高中</li>
        <li>2020-2024 春日部大学</li>
    </ol>
    <h2>专业技能</h2>
    <ul>
        <li>熟悉JavaSE基础语法，各种类库熟练调用</li>
        <li>熟悉Java底层数据结构的实现和应用，并且可以独立实现</li>
        <li>熟悉Java多线程，并且熟悉多线程编程和多线程注意事项</li>
        <li>熟悉计算机网络原理，了解常见协议的原理并能排查常见问题</li>
        <li>熟悉常见算法，Leetcode刷题量为600</li>
    </ul>
    <h2>我的项目</h2>
    <ol>
        <li>留言墙</li>
        <div>开发时间：2022年10月25日</div>
        <div>功能介绍：</div>
        <ul>
            <li>支持留言功能</li>
            <li>支持匿名留言功能</li>
        </ul>
        <li>学习小助手</li>
        <div>开发时间：2022年11月11日</div>
        <div>功能介绍：</div>
        <ul>
            <li>支持错题检索</li>
            <li>支持同学讨论</li>
        </ul>
    </ol>
    <h2>个人评价</h2>
    <div>在校期间，成绩优异，多次获得奖学金</div>
</body>
</html>