煲纸学习笔记——html

HTML

头部标签

1. meta 标签 用于设置元数据
<meta charset = 'utf-8'> 
<!-- 设置网页的字符集 -->
<meta name='key' content='value'> 
 <!-- 
     content 制定数据的内容 主要用于搜索引擎搜索
 title 标签的内容 作为搜索结果的超链接
 description 网站的描述 会展示在搜索引擎的结果 
-->
<meta http-equiv = 'refresh' content = '3;url=https://www.baidu.com'>
<!-- 重定向几秒之后跳转网页 -->
2. title 标题标签 网页标题
3. script 脚本标签 中间可以书写JS语句，或者可以通过src属性加载外部文件
4. link 一般用于加载样式表
<link rel="stylesheet" type="text/css" href="theme.css" />

body标签

1. 标题标签h1-h6，标题一般用h1-h3 。

2. 段落标签p标签，为块元素 ，表示页面中的一个自然段。

3. 块元素 用于布局 div；行内元素 主要用来包裹文字span

4. 列表

   1. 有序列表 ol>li
   2. 无序列表 ul>li
   3. 定义列表 dl>dt（表示下定义的内容）>dd（对内容进行解释说明）

5. a链接 可以嵌套很多元素

   • 属性target = 有两个值 _self（默认值） 和 _block
   • 跳转到顶部 地址是href="#"
   • 相对路径 : 一般都用./表示当前路径或者…/表示上一级
   • id值区分大小写字母开头 href= “#id”

6. img图片标签 （替换元素）属性 src表示路径 ； alt 对图片的描述 被搜素引擎进行检索； width height 如果只修改一个另一个会被定比例缩放；

7. 内联框架引入其它页面 <iframe src="地址" frameborder="0/1"></iframe>

8. 播放音乐和视屏

	<audio controls loop autoplay>
        <source src= "">
        <source src= "">
    </audio>
    <video> <source src= "  "></video> 
 	<!-- 
	src=' '  
	 controls 是否允许用控制播放 
	 loop 是否允许循环播放 
	 autoplay 是否自动播放 
	 source 路径可以支持多个引入文件 从上而下运行 
	 ie8以后加入不兼容用<embed src="" type="">标签和source并列 
	 -->

9. 表单标签

<from action="服务器地址"> 下面的表单属性可以写在这个标签里面</from>用于提交数据
<input type='text'  name="email">
button 按钮
checkbox 复选框
file 文件上传
image 定义图像形式的提交按钮。 <input type="image" src="submit.gif" alt="Submit" />
password 密码  <input type="password" name="pwd" />
radio 单选框
<input type="radio" name="sex" value="male" /> Male
reset 重置表单 <input type="reset" />
submit 提交表单
<form action="form_action.asp" method="get">
	Email: <input type="text" name="email" />
	<input type="submit" />
</form>
文本域 <textarea rows="10" cols="30">

下拉列表
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel" selected="selected">Opel</option>
  //selected 默认被选中
  <option value="audi">Audi</option>
</select>
/* 一些属性的补充
readonly 将表单选择为只读 数据会提交 
disabled 将表单设置为禁用数据不会提交  
autofoucus 自动获取焦点
*/

10. 一些补充的标签

    <hgroup>  可以将相关标题放在一起 </hgroup>;
    <em>标签用于语音语调的加重 会斜体（行内元素）</em>; 
    <strong>（行元素） 加粗 </strong>； 
    <blockquote> 引用标签会有缩进段引用</blockquote> 
    <q> 标签短引用会加引号   </q>
    <br>换行

11. 图片格式

    • jpg / jpeg 支持的色彩丰富，被压缩所以图片比较小，但是不支持透明，动画，图像渐进，适合用在web页面上。
    • png 支持透明和半透明图片，但是图片较大，除透明和半透明的图片外一般使用jpg
    • gif 支持动图，支持半透明。相同的图片往往所占内存最小
    • webp 支持动图，半透明，透明，体积小，但是兼容性较差。
    • base64 对图片进行编码，可以把base64码加到html / css中可以减少网络请求，但是会增大图片体积，一般对较小的图片进行转换。
    • svg 基于XML的图片格式，为矢量图，放大缩小不会失真，但兼容性较差。

12. 浏览器在解析网页的时候 会对不符合标准的内容进行修改：

    1. 标签写在根元素的外面
    2. p标签中嵌套了块元素
    3. 根元素中出现了除head和meta的标签