html笔记

html简介

html是一个网页的主体部分，也是一个网页的基础，因为一个网页可以没有样式，可以没有交互，但是必须要用网页需要呈现的内容，所以html部分是整个前端的基础

html是超文本标记语言，一种用于创建网页的标记语言

html标签

html是一个标记语言，通过各种各样的标签来标记网页内容的

什么是标签

  • html中规定了<> 包起来的都是标签

  • 在html中标签通常是成对存在的，分为开始标签和结束标签

  • 标签之间是可以嵌套的

  • 标签里面是不区分大小的，但是建议使用小写为准

html文档结构

一个html文件是有自己的固定结构的

<!-- 文档声明，告诉浏览器是html -->
<!DOCTYPE html>
<!-- 根标签，所有的网页标签都必须在这个里面 -->
<html lang="en">
<!-- 定义文档的头部，是所有头部元素的容器，里面还可以包含很多的标签，后面会详解的 -->
<head>
    <!-- 网页采用utf-8编码格式 -->
    <meta charset="UTF-8">
    <!-- 针对移动端的，不需要关注 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页的标题 -->
    <title>Document</title>
</head>
<!-- 网页的主要内容，只需要一个body标签 -->
<body>

</body>

</html>

img

head标签相关内容

文档的头部描述了文档的各种属性和信息，包括文档的标题，编码格式及url信息

title标签

显示的网页的标题信息，会显示在浏览器标签页的标题栏中

主要就是告诉用户和搜索引擎这个网页的主要内容是什么

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这个是网页标题</title>
</head>

img

meta标签

link标签

引入外部样式表，在目录下创建index.css文件，可以在网页控制台看到如下信息

还可以定义网站的图标

style标签

script标签

body标签

想要在网页上展示的内容需要放在body标签中

标题h1~h6

h1标签是最大的标题，h6是最小的，没有h7

特点：属于块级元素，独占一行，可以设置宽高

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

img

段落标签p

<p>,paragraph的简写，定义段落

特点：跟普通文本一样，可以通过css来设置段落的样式，也是块级元素，独占一行


<body>

    <p>我是段落1</p>
    <p>我是段落2</p>

</body>

img

强调标签em

作用：让字体倾斜

行内标签

<body>

    <p>我是段落1</p>
    <p>我是段落2</p>

    <em>我是斜体</em>
    <p><em>我是段落三</em></p>

</body>

img

换行标签br

将内容进行换行，相当于是在word中编辑文档使用回车符

<body>

    <p>我是段落1</p>
    <p>我是段落2</p>

    <em>我是斜体</em>
    <p><em>我是段落三</em></p>
    <br>
    你好世界

</body>

img

加粗标签strong

行内标签

<body>

    <p>我是段落1</p>
    <p>我是段落2</p>

    <em>我是斜体</em>
    <p><em>我是段落三</em></p>
    <br>
    你好世界
    <strong>工作</strong>
</body>

img

分割线hr

用来分割内容的

<body>

    <p>我是段落1</p>
    <p>我是段落2</p>
    <hr>
    <em>我是斜体</em>
    <p><em>我是段落三</em></p>
    <br>
    你好世界
    <strong>工作</strong>

</body>

img

盒子div

可以定义文档的分区，将文档内容分割成独立的，不同的部分
后面css里面会用到的

组合文档中行内元素span

行内标签，使用css的时候，才会有这个视觉上面的变化

图片img

行内标签

<body>

    <p>我是段落1</p>
    <p>我是段落2</p>
    <hr>
    <em>我是斜体</em>
    <p><em>我是段落三</em></p>
    <br>
    你好世界
    <strong>工作</strong>
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.ZELak2yw432UAWOClsEKDAHaE6?r=0&o=7rm=3&rs=1&pid=ImgDetMain&o=7&rm=3"
        alt="图片未显示" title="鼠标悬浮显示内容" width="200px">

</body>

src就是地址

alt当图片没有显示的时候表现

title 当鼠标悬浮在图片上显示的内容

width 宽度 height 高度

img

超链接标签a

点击跳转内容

<body>

    <p>我是段落1</p>
    <p>我是段落2</p>
    <hr>
    <em>我是斜体</em>
    <p><em>我是段落三</em></p>
    <br>
    你好世界
    <strong>工作</strong>
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.ZELak2yw432UAWOClsEKDAHaE6?r=0&o=7rm=3&rs=1&pid=ImgDetMain&o=7&rm=3"
        alt="" title="鼠标悬浮显示内容" width="200px">

    <a href="https://www.baidu.com" target="_blank">点击跳转到百度首页</a>

</body>

target的_blank选项，就是说点击后是打开一个新的页面，而不是覆盖原来的页面

img

列表标签ul ol

网站上一些列表相关的内容，比如说物品列表，人名列表都可以使用列表标签来展示，通常需要跟后面的li一起用，每条li表示列表的内容

可以嵌套的使用的

ul是无序列表，unordered lists的缩写

ol是有序列表，ordered lists的缩写

    <ul>
        <li>我是无序列表</li>
        <li>第二行</li>
        <li>第三行</li>
    </ul>

    <ol>
        <li>我是有序列表</li>
        <li>第二行</li>
        <li>第三行</li>
    </ol>

效果图：

img

有序列表的开头是数字

无序列表的开头是黑圈点

ul标签的属性type(列表标识的类型)

  • disc:实心圆(默认值)

  • circle：空心圆

  • square：实心矩形

  • none：不显示表示

ol标签属性type

  • 1：数字

  • a：小写字母

  • A：大写字母

  • i：小写罗马字符

  • I：大写罗马字符

嵌套使用

    <ol>
        <li>我是有序列表</li>
        <li>下面还有一个无序列表</li>
        <ul>
            <li>我是无序列表</li>
            <li>上面一个是有序列表</li>
        </ul>
    </ol>

img

body标签相关内容----表单标签form

表单是一个包含表单元素的的区域

表单元素是允许用户在表单中输入内容，比如，文本域，输入框，单选框

表单的作用

表单用于显示，收集信息，并将信息提交给服务器

表单的语法

<form>允许出现表单的属性</form>

表单标签属性

<form action="https://www.baidu.com" method="get"></form>

action：定义表单被提交时发生的动作提交给服务器处理程序的地址

method：定义表单提交数据的方式

  • get是默认值，明文提交，提交数据室可以显示在地址上，安全性低，提交数据有大小限制，最大为2KB

  • post,隐式提交所有内容，不会显示到地址栏，安全性高，数据无大小限制

enctype：编码类型，即表单数据进行编码的方式，允许表单将什么样的数据提交给服务器，取值分为三种

  • application/x-www-form-urlencoded默认，允许将普通字符，特殊字符，都提交给服务器，不允许提交文件

  • multipart/form-data 允许将文件提交给服务器

  • text/plain：只允许提交普通字符，特殊字符，文件都无法提交

注意：如果有文件需要提交给服务器，method必须为post,enctype必须为multipart/form-data

表单控件分类

表格标签

还是写在一起吧，因为这个html基础还是比较的简单的

就是写详细一点即可

还有后面还会继续学习的css样式和js

标签分类

html中标签元素三种不同类型，块状元素，行内元素，行内块状元素

常见的块状元素: div,p,h1,ol,ul,table,form,li

常见的行内元素：a,span,br,strong,label

常见的行内块状元素：img,input

三个标签的特点：

  • 块级元素：

    • 每个块级元素都是从新的一行开始，并且后面的元素也另起一行，独占一行

    • 元素的高度，宽度，行高以及顶和底边距离都可设置

    • 元素宽度不在设置的情况下，是它本身父容器的100%(和父元素宽度一致)，除非设置一个宽度

  • 行内元素：

    • 和其他元素都在同一行

    • 元素的高度，宽度，顶部和底部边距不能设置

    • 元素的宽度就是包含的文字或图片的宽度，不能被修改

  • 行内块状元素的特点：

    • 和其他元素都在同一行

    • 元素的高度，宽度，行高以及顶和底边距都可设置

标签嵌套规则

  1. 块级元素可以包含行内或某些块元素，但行内却不能包含块元素，它只能包含行内元素

  2. 块级元素不能放在p标签里面

  3. 有几个特殊的块级元素只能包含行内元素，不能再包含块级元素

  4. 块元素的包容性很强，可以放行内，部分块元素也可以

  5. 行内元素包容性很弱，只能放文字，其他行内元素，不能放块级

案例 p标签，p里面只能放文字，行内元素，不能放任何的块级元素

posted @ 2026-05-25 19:14  乔的港口  阅读(16)  评论(0)    收藏  举报