目录
HTML知识点
HTML5知识点
HTML知识点
-
HTML中的<meta charset="utf-8">定义了网页的编码标准，防止中文乱码。
<title> </title>标签中显示的是标题，网页的最顶上的小文字；
<body> </body>标签中显示的是主体部分，网页的整个白色部分。
-
HTML中的空格和回车换行是没有任何意义的；
一般地， 表示空格，<br/>表示换行。
-
标签分为单标签< />和双标签< > < />
-
标题标签<h1> </h1>至<h6> </h6>标题等级越来越小，文字越来越小；
并且只有1-6，数字超过6如：<h7> </h7>是没有作用的，就是普通大小。标题标签独占行
-
段落标签<p> </p>会自占一个大盒子，在该标签后面编写其他文字自动换行；
但是样式和普通文字相同，为了保证标签语义化---作用：能提高在搜索引擎里的排名，获得更多点击。
-
容器
<div> </div>大盒子，独占块。
<span> </span>小盒子，可与其他在一行显示。
<p> <p>段落标签，独占块
<li> </li>；<ul> </ul>；<ol> </ol>列表标签，独占块。
-
HTML中的注释：<!-- -->，快捷键：ctrl+? ，解除 再次按键；
注释是程序员写代码的提醒，在网页不显示，客户看不见；一般地项目上线前要删掉，注释也是一行代码会占网速，无用代码---对客户没有作用的代码会影响网页打开的速度。
-
标签语义化：在合适的地方使用合适的标签---能提高在搜索引擎里的排名，获得更多点击。
弱语义 ：
<b>加粗</b>
强语义：
<strong>特强加粗</strong> 一篇文章不能使用多次，仅用一到两次
<s>删除线</s>
<del>新版删除线</del> 替换版，现在一般用的居多
<i>倾斜</i>
<em>普通强倾斜</em> 普通强调，可使用多次
-
图片标签 <img src=”资源路径” width=” ” height=” ” title=” ” alt=” ”/>
属性名之间用空格隔开；属性名=”属性值”---键值对语法，kv对。
src-引入的图片位置；width-宽度，height-高度，若只改其一按原图等比例缩放；
title属性-图片标题，鼠标悬停时的提示文字；
alt-当图片无法正常加载时才会显示，写的文字一般是图片的描述信息；
-
路径：查找某个资源所在的定位地址。
-
绝对路径：在计算机中的完整路径；在前端中不推荐使用，代码没有移植性；
-
相对路径：相对于当前文件的路径
-
同级查找<img src=”02图.jpg”/> html文件和图片在同一文件夹中
-
下级查找<img src=”显示图/00图.jpg”/> html文件和图片所在文件在同一文件夹中
-
上级查找<img src="../图片/01图.jpg"/> html文件和图片两者所在文件夹在同一文件夹中或<img src="../01图.jpg" /> html所在文件夹和图片在同一文件夹中
注意：上级查找在HBuilderX中执行不出来--是浏览器的问题，直接打开html文件 能正常实现
-
超链接：平时在网页上见到的点击可以发生页面跳转的模块。
<a href="https://www.baidu.com">点击去百度</a>
或<a href="04图片标签.html" target="_blank">点击看图</a>
注意：若要点击去线上网站 必须添加https://---超文本传输协议，才可以正常跳转。
href中写的是要跳转的路径，可以是网站或本地文件；target=”_blank”-新窗口打开的效果。
-
空链接：当前不知道路径名 后续补上，用空链接
<a href="#">点击我去某某界面</a>
#可以多个，当只写一个#时能一瞬间返回到顶部，没有动画 用户体验感差
<a href="javascript:void(0);">点击我去某某界面</a>
<a href="javascript:;">点击我去某某界面</a>
-
表单：在网页上用来收集用户数据；一般是输入式的表格。
<form action="某一个后台程序" method="get"></form>
form标签-表单的根标签，在网页不显示内容；
action-该属性的值就是所有表单内容传递给的后台程序；
method-代表传输数据时的方法；get-明文传递，post-简单的加密传递。
-
输入框：<input type=" " placeholder=” ” />
placeholder-框里的提示文字;
type-文字输入类型，当属性值为不同效果就不同：
text-普通输入；
password-隐蔽输入，输入看不见；
-
<input type="radio" name="xb" id="nan"/><label for="nan">男</label> input标签里的id和label标签里的for属性值对应，可实现点击文字”男”就可选中
radio-单选圆形，name=”xb”表示多个选项的单选效果；
checkbox-多项选择方形
注意：为了提升用户体验，点击文字也能选中的效果必须具备。
-
下拉菜单：默认选项要注意符合要求，下拉可选数也要符合。
<select name="" id="">
<option value="">北京</option>
</select>
默认选中是第一个option的值，或者在option中加入selected="selected"。
-
文本域：输入文本的区域。
<textarea name="" id="" cols="20" rows="10"></textarea>
cols-文本框的列宽-x轴方向，rows-文本框的行高-y轴方向；
注意：①程序员一般不使用clos和rows，因为兼容性问题在不同的浏览器中大小不一样。一般使用css解决。
②普通状态下文本框右下角有一个伸拉的效果，用户可以自己调节大小会误导用户，用css解决，textarea{resize:none;}
-
按钮标签：<input type=" " value=" "/>
value-按钮上的文字；该值必须要设置---解决兼容性问题，若不设置，浏览器就会自己写入一个默认值，可能是中或英文。
type-按钮的类型；
button-普通按钮；
reset-重置按钮，点击后重置页面的表单数据而非清空；
submit-提交按钮，点击后会将表单中数据传给form标签中action的值对应的后台程序。
-
默认选中，可以提高用户体验。在需要选择的input标签里加上checked="checked"。
如：游戏网站性别默认男，化妆品网站性别默认女。
-
列表标签
-
无序列表：无顺序之分，用圆点/方点显示。
<ul> <li>数 学</li><li>语 文</li> </ul>
-
有序列表：有顺序的区分，如排行榜，用数字排行表示。
<ol> <li>第一名</li><li>第二名</li> </ol>
标签要使用的准确才能保证标签语义化能得到最好的体现---能提高在搜索引擎里的排名，获得更多点击。
-----------------------------------------------------------分解线-------------------------------------------------------------
HTML5知识点
-
HTML5的结构标签
头标签：<header> </header>
导航标签：<nav> </nav>
侧边栏标签：<aside> </aside>
文章块段落标签：<article> </article>
底部标签：<footer> </footer>
以上的结构标签都能增加网站语义化，从而提升搜索引擎对网站的排名。
-
数据列表标签：比前面的列表标签<ul>、<ol>多了可自行填写的功能；既可选择也可自填。
请填写您的口味：<input type=”text” list=”kw” /><datalist id=”kw”><option>清淡</option></datalist>
可填写就要有文本框，datalist的id和input的list的值相对应才能产生联系；
option里的属性value要么不写，要么填值才能实现效果，空值是无效；一般都会删除。
-
新增表单验证标签：
<form action="xx.php" method="get">
<input type="text" />
<input type="text" required="required" autofocus="autofocus" /><br />
-
<input type="text" autocomplete="on" name="biaoge" />
<input type="submit" value="提交" />
</form>
require-非空验证/空判断-未填写会给出文字提示；
autofocus-自动获取焦点-打开界面可以直接输入不需要鼠标点击，提高用户体验；
autocomplete-自动弹出历史记录，有记忆功能；应设置为”on”，默认为关闭”off”；
name-上一次填写内容保存的地方，其属性值相当于提交的数据所保存的文件夹。
-
新增表单标签：根据输入框类型给出对应提示文字。
type-输入框的类型：
email-邮箱属性；
url-网站属性-必须包含http://；
number-数字属性-实现让输入框只能输入数字，可通过框末尾的上下键来实现输入；
search-可在文本框末尾出现一个X，点击实现内容清空的效果；
datetime-local-除键盘输入外，还可直接通过文本框弹出的日期来选择；
month-年月~~~；
week-一年中的第几周~~~；
time-时分~~~；
date-年月日~~~；
range-滑块/进度条。（~~~同上）
-
音频标签：音频格式 .mp3 .ogg
<audio src="白羊.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
controls-显示进度条；autoplay-自动播放；loop-循环播放；
注意：音频/视频标签价值很高，浏览器都想以自己为标准，所以w3c联盟组织规定浏览器对音频标签的兼容性要求。若想要主流的浏览器对能很好的播放音频就需要把这首音频设置为不同的格式都加载到页面中，这样就可以保证浏览器的兼容性。
确保更好的兼容性：<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="白羊.mp3"> </source> <source src="白羊.ogg"> </source> </audio>
-
视频标签：视频格式 .mp4 .ogv .webm
1208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
