HTML知识点

目录

1、简单认识html

2、标签

1>常用标签列表

2>语义化标签

3>特殊实体 符号

4>超链接

5> 列表

6> 表单

1、简单认识html

html：HyperText Mark-up Language 超文本标记语言

后台代码是什么，最终呈现给客户端的就是html+css。

2、标签

1>常用标签列表

标签	说明
b/strong	字体变粗体
i/em	文字变斜体
u	文字加下划线
del	删除线
br	换行
p	段落
pre	预格式化段落
span	标准行内标签，一般用来修饰文本
div	标准块标签，一般用来布局页面
sub	下标
sup	上标
hr	水平分割线
hn	标题标签（共有6级，h1、h2... h6）

2>语义化标签

标签名称	作用
header	定义页面的顶部（页眉）内容
article	主要是用来表示文章内容的
section	于对网站或者应用程序页面上的内容进行分块
nav	用作页面导航的链接组
aside	当前页面或文章的附属信息部分
footer	上层父级内容区块或是一个根区块的脚注
hgroup	hgroup元素是将标题及其子标题进行分组的元素。hgroup 元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组
address	address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮件、真实地址、电话号码等
figure	网页上的一块独立元，素在一个figure元素中只能放置一个figcaption元素，表示该figure元素的标题
figcaption	figure元素块中的标题
details	details元素主要用来列表一些关键的的元素，在它中，我们使用summary元素作为details元素的标题，如果我们在details元素中不使用summary元素，则默认出现“显示详细信息”。
summary	作为details元素的标题
mark	标注或者高亮一些我们需要的关键字词
progress	表示当前的完成进度情况
meter	meter元素有六个属性，value表示值，min表示最小值，max表示最大值，low表示下限，high表示上限，optimum表示最佳值
cite	表示作品或文章中的标题
small	HTML5中，small元素被重新定义了，small通常标签与正文无关的文字，内嵌在页面上，如标注版权信息，网站备案等
canvas	画布标签，用来在页面上画图案

<div>
             <header>头部</header>
             <nav>菜单</nav>
             <section>内容</section>
             <footer>脚</footer>
</div>

3>特殊实体 符号

4>多媒体标签

1）图片 img

<img src="路径" alt="图片不显示的时候的提示文字" title="鼠标悬浮在图片上的提示文字" width="宽带" height="高度"/>

路径:难点重点，必须掌握

相对路径:推荐使用,相对于当前的html页面来说的

绝对路径:不推荐

 <img src="../info1.png" width="120px" height="80px" alt="明星照片" title="这个一个大明星" />
<img src="file:///D:/20221010/01_html+css/html01/info1.png" /> <!--绝对路径，不推荐-->

相对路径地址问题

img/info01.jpg  页面和img在同一个文件夹中，img文件夹中由一个图片info01.jpg
info01.jpg      图片和页面在同一个文件夹中
../info01.jpg   退一级找到info01.jpg
../img/info01.jpg  退一级，进入img文件夹找info01.jpg

1>标签

  <p></p>段落
  <h1></h1>标题   h1~h6
  <div></div>  布局上
  <b></b>
  <u></u>
  <i></i>
  <span></span>
  <pre></pre>
 <sup></sup>
 <sub></sub>

元素展示方式分类

1）块级元素:占据一块区域

2)内敛元素:不会独立占据一块区域

2>特殊实体符号

>
<
&
&copy
 

3>img标签

<img src="图片路径" width="宽度" height="高度" title="鼠标悬浮图片上的提示文字" alt="图片不显示的时候的提示文字" align="bottom|top|middle"/> <!--align:文字和图片的对齐方式-->

相对路径:【相对路径】

绝对路径:【不太用】

img/photo.jpg
photo.jpg
../photo.jpg
../img/photo.jpg

4>引入多媒体资源

<!--引入mp4 source：mp4的资源，通常准备两套，解决浏览器兼容的问题
 autoplay="autoplay"：有的浏览器不支持
​
-->  
<video controls="controls" autoplay="autoplay">
          <source src="img/dzq.mp4"></source>
          <source src="img/dzq.avi"></source>
 </video>
<!--插入mp3-->
 <audio src="img/lh.mp3" autoplay="autoplay"></audio>
<audio>
   <source src=""/>
</audio>

3>表格

<table cellspacing="表格内边框和外边框的距离" cellpadding="文字和内边距线的距离" align="表格的位置，可以是center|left|right" background="背景图片" bgcolor="背景颜色"> <!--表格-->
    <tr align="文字水平方向的位置" valign="文字垂直方向的位置"> <!--行-->
        <td align="center"></td> <!--列-->
    </tr>
</table>

thead：表格头

tbody：表格体

tfoot：表格脚

表格跨行与跨列

rowspan:跨行
colspan:跨列
跨行和列 位置，数量，删除占据的单元格的位置

4>超链接

1）页面间的链接

<a href="链接的地址" target="_blank|_self">文字</a>
<!--
            href:超链接的地址
            target:链接打开的位置  _self:自身打开【默认】 _blank:新的选项卡
 -->

2）锚链接

1>定义锚  <a name="mark"></a>
2>使用锚  <a href="#mark"></a> <!--本页面使用-->
         <a href="网页地址#锚名字"></a><!--不同页面使用-->

3) 功能性链接

<a href="mailto:邮箱地址"></a>

4)map标签

<map name="mymap">
    <area shape="circle" coords="100,100,50" href="demo02.html" />
    <area shape="rect" coords="50,50,100,120" href="demo01.html"/>
</map>
<img src="" usemap="#mymap"/>

shape:形状

coords:坐标

href:点击该区域连接到页面

5> 列表

注意：正确嵌套

1)无序列表

<ul>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
</ul>

ul 属性中有个type【列表符号的样式】 默认是disc【实心圆】 circle【空心圆】 square【实心方块】

2)有序列表

<ol>
    <li>列表项一</li>
    <li>列表项二</li>
    <li>列表项三</li>
</ol>

type: 默认是1 2 3 其他:i ,a,A

3)自定义列表 图文混排上

<dl>
   <dt>标题</dt>
   <dd>对标题的描述信息</dd>
   <dd>对标题的描述信息</dd>
   <dd>对标题的描述信息</dd>
</dl>

6> 表单

form：定义一个表单，action属性代表的是表单提交的地址。

method:表单提交的方式，默认是get提交，可以社招method="post" 变成post提交

get与post提交的区别： get提交会将提交的参数拼接再url的后？name=val拼接并显示再url的后面

post会将提交的数据隐藏再请求体中提交给服务器端，post提交的方式比get更安全

提交数据量的大小也是不同的，get，post都有一个长度的限制。get数据量比较小的，post，肯定能满足你的要求的。

表单提交通过submit按钮来进行提交的 文本框：

<input type="text" name="名字" value="文本框显示的值" size="文本框长度" maxlength="输入最多字符个数" readonly="readonly[只读]" disabled="disabled|不可用"/>

密码框：

<input type="password" name="名字" value="文本框显示的值" size="文本框长度" maxlength="输入最多字符个数" readonly="readonly[只读]" disabled="disabled|不可用"/>

单选框：一组单选框，认为他的名字是要一致

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

代码说明:type="radio" 单选框，一组单选框的名字必须一致 value="提交给服务器的值"

单选框默认选择是checked="checked"

加入语义化标签<label> 希望点击男字的时候，代表男的单选框就是一个选中的状态 给单选框设置属性id="" id所对应的值具有唯一性

再label标签中加入for="id的值"

复选框

<input type="checkbox" name="tec" value="1" checked="checked"/>java 

下拉列表框:option代表的是每个选项 selected="selected" 选项默认选中的

size:呈现出选项的个数 multiple="multiple":下拉列表框也选择多个

<select name="address" size="3" multiple="multiple">
                          <option value="1">北京</option>
                          <option value="2">上海</option>
                          <option value="3">深圳</option>
                          <option value="4" selected="selected">杭州</option>
                          <option value="5">成都</option>
 </select>

文件域：表单的提交方式必须是post提交，除此以外还需要设置表的数据提交方式 enctype="multipart/form-data"

<input type="file"/>

文本区域框

<textarea name="intr" cols="列" rows="行">这个人很懒，什么都没留下......</textarea>

隐藏域

<input type="hidden" name="id" value="1001"/>

滑块

<input type="range" min="最小值" max="最大值"/>

数字

<input type="number" min="最小值" max="最大值"step="步长"/>

邮箱:输入必须是邮箱格式

<input type="email"/>

url：输入正确的url地址

<input type="url"/>

数字

<input type="number" pattern="正则，验证输入的信息是否符号正则" placeholder="文本框的提示信息"/>

不同类型的按钮

<input type="submit" value="提交"  /><!--提交按钮。实现表单的提交-->
<input type="button" value="按钮" /><!--普通的按钮-->
<input type="reset" value="重置" /><!--重置按钮-->
<input type="image" src="img/hah.png" width="150" height="50" /><!--将图片做成按钮，可用提交表单-->

日期类型以及颜色

<input type="color" name="" id="" value="" /> 
<input type="date" /> 
<input type="time" /> 
<input type="datetime-local" />