前端学习——HTML重要知识点概括

最新推荐文章于 2024-05-06 23:19:18 发布

今天不想敲代码

最新推荐文章于 2024-05-06 23:19:18 发布

阅读量98

点赞数 1

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

本文链接：https://blog.csdn.net/m0_46084075/article/details/115637476

版权

前端学习专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一. HTML复习

1.1 行级标签

	行级标签特点,所有行级标签默认在一行内显示,并且该类标签都没有高和宽的概念

    <i>字体斜体</i>
    <em>字体斜体(语义化标签,表示强调)</em>
    <b>字体加粗</b>
    <strong>字体加粗(语义化标签,表示着重)</strong>
    <s>删除线</s>
    <del>删除线(语义化标签,表示删除)</del>
    <!--target默认值,_self表示在当前窗口打开,_blank表示在新窗口打开-->
    <a href="http://www.baidu.com" target="_blank">超链接</a>
    <!--锚链接中href属性指定的是页面中某个标签的id,点击后自动跳转到该标签位置-->
    <a href="#id">锚链接</a>
    <!--图片标签-->
    <img src="图片地址" alt="图片地址失效时展示内容">
    <span>包裹容器,无特殊含义</span>

1.2 块级标签

	块级标签特点,默认高度为auto,默认宽度为100%

<h1>标题标签(h1-h6)</h1>
<p>段落标签</p>
<div>容器标签,无特殊含义</div>
<!--br标签为换行符标签,表示在此处强制换行,当前写法为单标签的完整写法-->
<br />
<!--hr标签为水平线标签,表示一条水平线,当前写法为单标签的简写形式-->
<hr>

1.3 列表标签

1.3.1 无序列表

<h2>无序列表</h2>
<hr>
<!-- ul-li组成无序列表,必须是嵌套关系,并且ul标签内只能嵌套li标签,其他标签可以写但是无效 -->
<!-- 无序列表在后期处理网页效果时,很常用,但是会清除他原有的样式,只保留他的骨架 -->
<ul>
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
    <li>选项四</li>
</ul>
<hr>

1.3.2 有序列表

<!-- 有序列表,同上ol标签内只能嵌套li标签 -->
<!-- ol标签内含有属性type:1表示阿拉伯数字(默认),a表示小写应为字母排序,A表示大写英文字母排序,I大写的I表示大写罗马数字排序,i表示小写罗马字母排序 -->
<!-- 还有一个属性start,start属性表示排序初始值(默认是1),可以自己设置 -->
<!-- 第三个属性:reversed,属性名为:reversed,属性值为:reversed,表示的是倒叙排序,当属性名和属性值相同的时候,属性名可以省略 -->
<ol type="1" start="5" reversed="reversed">
   <li>第一个内容</li>
   <li>第二个内容</li>
   <li>第三个内容</li>
   <li>第四个内容</li>
</ol>
<hr>

1.3.3 自定义列表

 <!-- 自定义列表 -->
 <!-- dt表示列表标题,其后的dd都表示对自己上方第一个dt的描述,dd个数不限 -->
<h2>自定义列表</h2>
<dl>
   <dt>金庸</dt>
   <dd>
      性别:男
   </dd>
   <dd>
      中国武侠小说巅峰
   </dd>
   <dt>琼瑶</dt>
   <dd>
      性别:女
   </dd>
   <dd>
      言情小说
   </dd>
   <dd>
      言情小说鼻祖
   </dd>
</dl>

1.4 表格标签

<!-- table标签的width属性表示表格的宽度,border表示边框的粗细 -->
<table width="50%" border="1px">
   <caption><h1>人员信息希纳是</h1></caption>


   <thead>
      <!-- 表格专用标签 -->
      <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
   </tr>
   </thead>
   <!-- tbody表示表格的数据内容,可以存在多个 -->
      <!-- thead表示表格的头部内容,只能存在一个,thead标签卸载table的任意位置都会在第一行显示 -->
   <tbody>
   <tr>
      <td>黄思源</td>
      <td>男</td>
      <td>18</td>
   </tr>
   <tr>
      <td>黄思源</td>
      <td>男</td>
      <td>18</td>
   </tr>
   <tr>
      <td>黄思源</td>
      <td>男</td>
      <td>18</td>
   </tr>
   </tbody>
   <!-- tfoot内容总会在表格底部显示,只能存在一个,在table的任意位置都会写在最底部 -->
   <tfoot>
      <tr>
         <td>总人数</td>
         <td>3</td>
         <td>3</td>
      </tr>
   </tfoot>
</table>

1.5 表单标签

表单标签和表单元素的概念

表单标签是指form标签
表单元素有：input，select，textarea和button按钮

<!-- form -->
<!-- form标签内的提交按钮被点击,会提交该form标签内的所有有name属性的表单元素 -->
<!-- action属性控制提交的服务器地址,没有给值则提交给自己 -->
<!-- method属性表示提交类型,GET或POST,默认为GET提交 -->

<!-- 
   GET提交时,表单内的内容会在地址栏直接显示
   POST提交时,地址栏不会显示内容
   GET提交时,携带的参数容量较小,造成原因是:浏览器对地址栏长度有限制,容量大概在2kb-8kb之间,不同浏览器和相同浏览器的不同版本之间都会有一定差异,需要具体问题具体分析

   POST提交参数容量较大,理论上无限,但是浏览器和服务器容器(Tomcat)对于请求有限制

   GET请求不安全,POST请求安全这句话是错误
   POST相较于GET请求安全,但不是绝对安全
 -->
<form action="">
   <div>
      <label for="username">用户名</label>
      <!-- type值为text表示普通文本输入框,可以输入任意内容 -->
      <!-- name属性非必选项,但是推荐要写name属性,否则该标签可能无意义 -->
      <!-- name属性只在表单标签内有效 -->
      <!-- placeholder属性在文本框内容为空时显示值,其他情况自动隐藏 -->
      <!-- value属性表示文本框的属性值,后面在JS操作中会经常使用 -->
      <!-- autocomplete控制是否让浏览器帮助自动填充 -->
      <!-- readonly属性表示该标签的值只能是初始值,不可修改,但是可以提交 -->
      <!-- disabled属性表示该标签的值只能是初始值,不可修改,且不可提交 -->
      <!-- tabindex属性可以自定义Tab键的下一个选定参数,值的大小来定,值越大越后面被选中,从小到大排序,当值为-1时不会被选中,disable标签也不会被选中 -->
      <input type="text" name="username" autocomplete="off" id="username" placeholder="请输入用户名" value="黄思源" readonly tabindex="1">
   </div>
   <div>
      <label for="password">密码</label>
      <input type="password" value="123456789" id="password" name="password" placeholder="请输入密码" disabled>
   </div>
   <div>
      <label for="birthday">生日</label>
      <input tabindex="2" type="data" id="birthday" name="birthday" placeholder="请选择日期">
   </div>
   <div>
      <label for="color">颜色</label>
      <input type="color" id="color" name="color">
   </div>
   <div>
      <label for="file">头像</label>
      <input type="file" id="file" name="file">
   </div>
   <div>
      <label for="age">年龄</label>
      <!-- step属性表示每次叠加的数字,但是要求他的值能够被max-min的值整除 -->
      <input type="number" id="age" name="age" max="120" min="0" step="5" placeholder="请输入年龄">
   </div>
   <div>
      性别
      <!-- 单选框要求同组内name值相同 -->
      <!-- 默认选中属性：checked='checked' -->
      <!-- 单选框或者复选框不给value属性无意义 -->
      <input type="radio" name="sex" value="男" checked id="boy">
      <!-- label标签为辅助标签,for属性的值要和当前某个ID的值相同,则会自动绑定为此ID的辅助控件 -->
      <label for="boy">男</label>
      <input type="radio" name="sex" value="女" id="girl"><label for="girl">女</label>
   </div>
   <div>
      <label for="address">地址</label>
      <select name="address" id="select">
         <option value="徐州">徐州</option>
         <option value="南京">南京</option>
         <option value="上海" selected>上海</option>
         <option value="广东">广东</option>
      </select>
   </div>
   <div>
      <label for="detail">详细地址</label>
      <textarea name="detail" id="detail" cols="30" rows="10"></textarea>
   </div>
   <div>
      <!-- submit会让表单内容进行提交 -->
      <!-- reset会让表单内容重置为初始状态,切记,重置不是清空表单 -->
      <input type="submit" value="提交">
      <input type="button" value="按钮">
      <input type="reset" value="重置">
   </div>


   <div>
      <!-- 推荐使用button标签方式创建按钮,更加具有语义化,并且button按钮是双标签,标签内可以 -->
      <button type="submit">提交按钮</button>
      <button type="reset">重置按钮</button>
      <button type="button">普通按钮</button>
   </div>
</form>

1.6 多媒体标签

audio标签（音频处理）

<!-- audio标签用来播放音频 -->
<!-- autoplay属性设置自动播放,部分浏览器会失效,后续可以使用js来实现自动播放 -->
<!-- controls属性设置是否显示控制条 -->
<!-- loop属性设置是否循环播放 -->
<!-- audio标签内可以嵌套多个source标签来解决浏览器兼容格式的问题 -->
<audio src="media/bgsound.mp3" autoplay controls loop>
   <source src="media/bgsound.wav">
</audio>

video标签（视频处理）

<!-- poster设置视频播放前的封面,不设置则默认为视频的第一帧 -->
<video src="media/mp4.mp4" autoplay controls loop width="500" height="500" poster="media/ad-3.png">
   <!-- <source src="media/mp4.ogg"> -->
</video>

1.7 路径的概念

1.7.1 绝对路径

真实的磁盘路径地址或者完整的网络地址,该方案一般只在引入网络地址时使用,本地文件引用尽量使用相对路径,因为绝对路径在网站位置发生改变后,本地文件的引用会失效

1.7.2 相对路径

以网页所在位置作为参考而建立的一套路径体系，当不同的网页引用同一个资源时，因为参照系不同，地址也会不同

资源和HTML文件在同一个文件夹内，直接输入文件名即可引用
资源在HTML文件的子级文件夹中，输入文件夹/文件名方式引用
资源在HTML文件的父级文件夹中，输入…/返回到父级文件夹目录，然后再进行选择文件夹和文件名，一层父级是…/两层父级是…/…/，依次类推

1.8 特殊符号

符号	说明	代码
	空格
<	小于	<
>	大于号	>
©	版权符号	©

1.9 SEO优化相关

<!-- 设置字符编码 -->
<meta charset="UTF-8">
<!-- 设置适配移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置标题 -->
<title>京东网页</title>
<!-- 设置字体图标 -->
<link rel="shortcut icon" href="favicon.ico">
<!-- 设置搜索关键字 -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
<!-- 设置网站描述 -->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">

二. 总结

以上是对于HTML重要知识点的一些概括，主要是以代码的形式展示，里面注释也都比较全，都是我学习的时候编写的一些代码案例，大家看后如果有发现什么不对的可以多多提出，大家一起学习，共同进步！！！

今天不想敲代码

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习——HTML重要知识点概括

HTML复习行级标签行级标签特点,所有行级标签默认在一行内显示,并且该类标签都没有高和宽的概念 字体斜体 字体斜体(语义化标签,表示强调) 字体加粗 字体加粗(语义化标签,表示着重) <s>删除线</s> <del>删除线(语义化标签,表示删除
复制链接

扫一扫

专栏目录