html基础知识

最新推荐文章于 2024-08-14 10:15:39 发布

二五仔java搬运工

最新推荐文章于 2024-08-14 10:15:39 发布

阅读量231

点赞数

分类专栏： html 文章标签： html web

本文链接：https://blog.csdn.net/qq_38023612/article/details/117557743

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本概念和常用标签，包括单双标签的区别、标签级别、属性规范、各种容器和文本标签、图像和多媒体处理、超链接、列表、表格、表单以及特殊符号的使用。同时讲解了布局、表单控件以及表单提交方式，为理解HTML网页结构提供了全面的知识框架。

摘要由CSDN通过智能技术生成

1.html的标签分为单标签和双标签

双标签如:<html></html>,<p></p>

单标签如:<br/>

2.标签的级别

容器级标签：可以添加文本，也可以再添加容器，可以存放任意标签,如h1,div

文本及：只能存放文字或者图片类似的元素。如p

3.空格折叠对象

当标签中的元素有空格，tab，换行的时候展示的时候都会编程一个空格

4.html属性规范

4.1 属性只能在开始标签内，和标签名隔开

4.2 属性为键值对写法，需写在双引号内

4.3 一个标签内有多个属性，用空格隔开

5.具体标签

5.1 h标签，h标签从h1到h6。根据标题的等级有默认的CSS样式。标题标签能存放容器级标签，但是标题之间不能互相嵌套。h1最为重要，可以存放LOGO，可以增加搜索引擎权重。

5.2 p标签，文本标签。

5.3 br 换行标签<br/> (breaking)

5.4 文字样式 b 标签：加粗。i标签：斜体。u标签：下划线。big标签：大号字体。em标签：定义着重文字。small标签：小号字体。strong标签：加粗显示。sub标签：定义下标文字。sup标签：定义上标文字。del标签：文字中间删除线。

5.5 <img>标签为单标签，指定位置插入图片。通过属性进行图像设置。src属性为必须属性。width,height:高度宽度，以px为单位或者省略不写。两个只设置一个的时候会等比例发生缩放。border:设置边框，为数字，表示边框宽度。title:设置鼠标悬停的文本。alt：替换文本，当图片出错的时候出现文本替换内容。

5.6 html的音频和视频。音频标签 <audio>为双标签：有src属性，音频路径。controls控制台标签，不设置此属性显示为空白。<video>视频标签，为双标签，src为路径，controls控制台标签，不设置此属性显示为空白。添加的类型为mp4等等

5.7 超链接标签。点击之后可以进行链接跳转<a>为双标签。在指定位置添加超级链接。页面跳转，文档下载等等。<a></a>.herf属性为路径地址，可以是相对路径也可以是绝对路径。target属性，可以定义是否打开新窗口，默认_self不打开新窗口，_blank打开新串口。title标签，鼠标悬停显示文本。锚点跳转：页面内锚点跳转：设置锚点（在需要跳转页面的标签设置id，或者在需要跳转标签之前设置a标签，且只设置name属性同id），点击的a标签，设置herf属性"#id"或者"#name".跨页面锚点跳转：设置锚点用页面内锚点跳转，点击跳转的a标签为文件地址加上#id.

5.8 列表标签。分为有序列表，无序列表，定义列表。

5.8.1 无序标签，分别是<ul>和<li>，li标签的重要程度是相同的。

// ul标签里面只能放li标签，li标签为一个经典容器标签，里面可以存放任意标签
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
 </ul>

5.8.2 有序列表由<ol>和<li>标签。

<ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
 </ol>

5.9 定义标签，由<dl> <dt>和<dd>标签组成。dl 表示定义一个自定义列表的大结构，dt表示自定义列表中的一个主题或者术语，dd定义解释项。dd解释最近的dt。dl中可以有多个dt和dl。

<dl>
    <dt>张三</dt>
    <dd>描述</dd>
</dl>

5.10 布局。<div>和<span>，无特殊含义的大标签。div：区域，俗称大盒子。span小区域，俗称小盒子，在不改变全体样式下，改变小样式。

5.11 表格，分别需要三个标签<table><tr><td>。tr表示行，td表示每个单元格。可以给table标签添加border属性，添加边框。添加样式border-collapse:collapse,为实线。th为表头。rowspan跨行合并，colspan跨列合并。采用顶边对其原则，添加相应的th或者td。表格分区：主题caption内部书写标题文字<caption></caption>，头部内部<thead><tr><th></th></tr></thead>，tbody表格的主题<tbody>tr>td</tbody>，内部嵌套tr>td,tfoot 内部tr>td。不论格式如何，浏览器会自动转换。

5.12 表单，搜集用户的输入信息。完整的表单分为表单域，表单控件，提示文本

form标签是一个双标签，是个功能性标签。属性action指定属性提交到服务器的url地址。

method设置表示提交方式，name区分不同的名字，

<input>标签，是单标签。重要属性，type:根据不同的类型决定展示的形态不同。

type="text" 单行文本内容。定义value属性，定义默认输入的文字。type="password"让用户输入密码，显示为实心圆或者*号。type="radio"单选框，一般成组出现。<input type="redio">男,同一组的单选框必须为互斥的属性，在input标签中假如name属性，设置相同的name。type="checkbox"，name表示是同一组。单选框和复选框可以设置默认选中的情况，设置checked即可。type="button"表示普通按钮，type="reset"将同一表单的数据清空，submit提交按钮，根据form表单的action和method，image默认提交，清空表单，通过source设置图片。type="file"上传文件multiple可以上传多个文件。

5.13 文本域<textarea>标签，双标签，可以输入多行。在标签中间设置默认值。属性rows设置数字，显示多少行，clos一行显示多少个文字，超过多少行显示滚动条。

5.14 <select>双标签，option，一个select中可以有多个option，设置默认选中项的时候设置selected。分组管理：<optgroup>中有多个option，可以设置一个label属性，属性只显示不能选中

5.15 所有的标签都可以使用label标签设置点击选中的范围。第一种绑定方法绑定方法<input type="redio" id="nan"><label for="nan">男</label>，第二种绑定方法<label ><input type="redio" >男</label>

5.16 特殊符号集合（字符实体）：< < > >空格  &#10换行符