html基础

๑Aurora.

已于 2022-05-10 21:23:24 修改

阅读量1k

点赞数

分类专栏：前端文章标签： html5 前端

于 2022-04-08 18:14:51 首次发布

本文链接：https://blog.csdn.net/qq_62755767/article/details/124016825

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一.相关知识

1.什么是HTML

HTML指的是超文本标记语言，是用来描述网页的语言，是一种标记语言，网页由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户。

2.浏览器内核(渲染引擎)：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

3.web标准构成：主要包括结构，表现，行为三方面

二.HTML基础知识

1.HTML标签

1）HTML语法规范

<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

标签分为双标签和单标签，双标签一般成对出现，例如上图<html></html>，其中前一个为开始标签，后一个为结束标签。

标签间关系：包含关系，例如上图<html></html>和<head></head>；并列关系，例如上图<head></head>和<body></body>

2）利用vscode开发的注意事项

新建文件后，在页面中输入！会自动出现以下框架

预览当前代码的页面：Alt+b

<!DOCTYPE>标签：文档类型声明，告诉浏览器使用哪种HTML版本来显示网页，不属于HTML标签

字符集为多个字符的集合，以便计算机能识别和存储各种文字

3）HTML常用标签

①标题标签：为了使网页具有语义化，会用到标题标签，共有六个等级，1->6根据重要性递减，加了标题的文字会变粗，且独占一行

语法格式：<h1></h1>

②段落标签：将文档分成不同段落，段落间会留有一定空隙

语法格式：<p></p>

③换行标签：单标签，遇到换行标签就会强制换行，只是换行作用

语法格式：<br/>

④文本格式化标签：可以设置粗体，斜体或下划线等效果，以突出其重要性

语义	标签	说明
加粗	<strong></strong>或者<b></b>	更推荐<strong>，语义更加强烈
倾斜	<em></em>或者<i></i>	更推荐<em>，语义更加强烈
删除线	<del></del>或者<s></s>	更推荐<del>，语义更加强烈
下划线	<ins></ins>或者<u></u>	更推荐<ins>，语义更加强烈

使用效果如下：

⑤<div>和<span>标签：<div>和<span>无语义，它们本质为一个盒子，用来装内容，每个<div>独占一行，一行只能放一个<div>，类似于一个大盒子；一行中可以放置多个<span>，可以看作是一个小盒子

⑥图像标签：单标签，用于定义html页面中的图像

语法格式：

<img src="图像" />

src是< img>标签的必须属性，用于指定图像文件的路径和文件名。

图像标签的其他属性：

路径：查找图像时，通常采用路径方式来指定图像文件的位置

路径可以分为：

1.相对路径：以引用文件所在位置为参考基础，建立出的目录路径，简单来说就是图片相对于HTML页面的位置

2.绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

注意事项：

图像标签可以拥有多个属性，必须写在标签名的后面
属性之间不分先后顺序，用空格分开
在设置图片的宽度或者高度时，一般规定一个，另一个会根据比例变化

⑦超链接标签：从一个页面链接到另一个页面

1.语法格式：

<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

2.链接分类：

外部链接：跳转目标必须加 http://....

内部链接：网站内部页面之间的相互链接，跳转目标可以直接为内部网站名称

空连接：如果没有确定的链接目标时，跳转目标可以用 # 代替

下载链接：如果 href 中地址为文件或压缩包，会下载这个文件，跳转目标为该文件路径即可

网页元素链接：为文本，图像，音频等添加超链接，<a></a>之间为要添加超链接的内容

锚点链接：在同一个页面中，点击链接，可以快速定位到页面中的某个位置

1）在连接文本中的href属性中，设置属性值为#名字的形式，如<a href="#two">二</a>

2）找到目标标签位置，在标签中添加一个id = 名字，如<h3 id = "two">二</h3>

⑧表格标签：增加数据的可读性，更清楚地展示数据

    <table>
        <tr>
            <td></td>
            ...
        </tr>
        ...
    </table>

1）<table></table>是用于定义表格的标签，一个<table></table>表示一个表格
2）<tr></tr>是用于定义表格中的行，一个表示表格中的一行
3）<td></td>是用于定义表格中的单元格

表头单元格标签：一般位于表格的第一行，其中文本内容加粗显示

语法格式：<th></th>

表格结构标签：为了更好的表示表格的语义，可以将表格分成表格头部和表格主体两大部分，不会对表格内容产生影响，但是可以更加清晰地明白表格结构

语法格式：

1）<thead></thead>表示表格的头部区域，内部必须有<tr>标签，一般位于第一行
2）<tbody></tbody>表示表格的主题区域

合并单元格：要写在目标单元格的<td>中

1）先确定为跨行合并还是跨列合并(跨行：rowspan="合并数量"；跨列：colspan="合并数量")
2）找到目标单元格，写上合并方式及合并数量(跨行：最上方单元格；跨列：最左端单元格)
3）删除多余单元格

表格属性设置：属性要写在<table>标签里面

⑨列表标签：用来布局，在布局时会更加自由和方便，分三类:无序列表，有序列表，自定义列表

i）无序列表：<ul>定义无序列表，<li>表示列表项

    <ul>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ul>

ii）有序列表：<ol>定义有序列表，<li>表示列表项

    <ol>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ol>

iii）自定义链表：<dl>定义自定义列表，<dt>定义项目或者名字，<dd>解释或描述<dt>中内容

   <dl>
       <dt>名词1</dt>
       <dd>名词1解释1</dd>
       <dd>名词1解释2</dd>
       ...
   </dl>

⑩表单标签：通常用于在收集信息时，一张完整的表单通常由表单域，表单元素和提示信息组成

表单域：包含表单元素的区域，用<form>来定义表单域，实现用户信息的收集和传递，<form>会把它范围内的表单元素信息提交给服务器

    <form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    </form>

表单元素（表单控件）：允许用户在表单中输入或者选择的内容

i）input输入表单元素：<input>用于收集用户信息，单标签，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式

<input type="属性值" />

type属性的常用属性值

<input>其他常用属性

name和value是每个表单元素都有的属性值，主要给后台人员使用
name是表单元素的名字，单选和复选框必须要有相同的name
checked属性主要针对单选和复选框，主要作用是打开页面是就会自动选中一个选项

   <form>
        <!-- text 文本框 用户可以输入任何内容 -->
        用户名：<input type="text" name="username" value="请输入用户名"> <br/>
        <!-- password 密码框 用户看不见输入的内容 -->
        密码：<input type="password" name="password"> <br />
        <!-- radio 单选按钮 可以实现多选 -->
        <!-- name 是表单元素的名字 性别要完成单选 必须有相同的name -->
        <!-- 单选按钮和复选框可以设置checked属性 当页面打开时会默认选择一个按钮 -->
        性别：<input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女<br />
        <!-- checkbox 复选框(多选按钮) 可以实现多选 -->
        爱好：<input type="checkbox" name="hobby" value="看书">看书<input type="checkbox" name="hobby" value="唱歌">唱歌<input type="checkbox" name="hobby" value="打游戏">打游戏<br />
        <!-- 点击提交按钮 可以把表单域 form 中的表单元素中的内容提交给后台服务器 -->
        <input type="submit"><br />
        <!-- 重置按钮 可以还原表单元素的初始的默认状态 -->
        <input type="reset"><br />
        <!-- 普通按钮 button 后期结合js 搭配使用 -->
        <input type="button" value="获取短信验证码"><br />
        <!-- 文件域 在上传文件时使用 -->
        上传头像：<input type="file">
    </form>

<label>标签：增加用户体验，当点击<label>标签内文本时，会自动选中或光标会移动到该内容对应输入框

    <label for="sex">男</label>
    <input type="radio" name="sex" id="sex"/>

<label>标签的for属性应当与相关元素id属性相同

ii）<select>下拉表单元素：在页面中，当有多个选项令用户选择时，可以节约空间

    <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        ...
    </select>

<select>中至少包含一对<option>
在<option>中定义selected=“selected”时，当前项即为默认选项

iii）<textarea>文本域标签：用户可以输入大量内容，不只是一行，定义多行文本的输入

   <textarea rows="3" cols="20">
       文本内容
   </textarea>

通过<textarea>标签可以轻松地创建多行文本框
cols=“每行中的字符数”，rows=“在页面显示的行数”

4）HTML中的注释和特殊字符

①注释：在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字

语法格式：以""结束，便捷方法：ctrl + /

②特殊字符

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
℃	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方(上标2)	²
³	立方(上标3)	³

语义元素：

๑Aurora.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html基础

目录一.相关知识二.HTML基础知识1.HTML标签1）HTML语法规范2）利用vscode开发的注意事项3）HTML常用标签4）HTML中的注释和特殊字符一.相关知识1.什么是HTMLHTML指的是超文本标记语言，是用来描述网页的语言，是一种标记语言，网页由网页元素组成，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户。2.浏览器内核(渲染引擎)：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。3.web标准构成：主要包.
复制链接

扫一扫