[记录] HTML

鱿鱼子吃泡面
192 阅读5分钟

HTML

Hypertext Markup Language 超文本标记语言

【文档声明】

HTML5的文档声明

  • 不写文档声明，会导致浏览器进入怪异模式Quirks Mode，解析页面时会产生一些不可预期的行为，导致页面无法正常显示。

【head】

（1）title

（2）meta

<meta/>

  • 自结束标签。
  • 设置网页的元数据。 设置charset：<meta charset="utf-8"/> 设置关键字：<meta name="keywords" content="html5, 前端"/> 设置描述：<meta name="description" content="啥呀啥呀"/> 请求重定向：<meta http-equiv="refresh" content="5s;url=httpbaidu.com"/>

（3）style

内部样式<style type="text/css"> </style>

外联样式<link rel="stylesheet" type="text/css" href="url"/>

【框架集】

<frameset row="30%, *, 30%">
	<frame src=""/>
</frameset>

使用框架集就不能再使用body标签。 frameset中还能再套frameset。

（1）row="30%, *, 30%"：框架集中的框架一行一行排列，*表示剩余的给中间。 （2）cols="50%, 50%"：框架集中的框架一列一列排列。 以上两个属性必须选择一个，并指出每一部分所占的比例大小。

【body】

注释

<!-- --> 页面上看不见，源码看得见。 不能套娃。

标题

<h1></h1> 块元素。 h1最大，h6最小。 一般只用h1、h2、h3。

p

<p></p> 块元素。 每个p标签独占一段，段与段之间会有间隙。 不能包含任何块元素！！！！

div

<div></div> 块元素。 每个div元素独占一行。

span

<span></span> 内联（行内）元素。 每个span元素只占自身大小。

img

<img src="" alt=''' width="" height=""/> 内联元素。

  • src 当前目录下./：可以省略。 当前目录的父目录下../：返回几级就写几个../。
  • alt 图片不能显示时的图片描述。
  • width
  • height 一般使用px作为单位；只设置width和height其中一个时，会等比例缩放。

audio

<audio src="" controls autoplay loop></audio>

  • controls 未加该属性，默认用户不能自己控制播放停止。
  • autoplay 控制音频是否自动播放。 大部分浏览器不支持。
  • loop

<audio controls> 对不起，您使用的浏览器暂不支持该音频的播放。<source src=""> </audio> 使用该写法，音频不支持播放时会显示文字。 指定多个source和font-family类似，第一个不行换第二个。

ie8及以下不支持。解决方法：

<!-- 所有浏览器都支持 -->
<embed src="" type="audio/mp3" width="300" height="100">

<!-- 终极完美写法 -->
<audio controls>
	<source src="">
	<embed src="" type="audio/mp3" width="300" height="100">
</audio>

video

和audio基本相同，ie8不支持则使用embed标签。

ifame

<iframe></iframe> 内联框架。 内联元素。

  • src
  • width
  • height
  • name

a

<a></a> 超链接。 内联元素。 可以包含任何元素，除了它本身。

  • id 页面唯一性
  • href （1）目的地址 （2）#：占位符/伪链接；回到顶部。 （3）#id （4）mailto:邮箱地址：打开系统默认电子邮件系统，收件人为该邮箱地址。
  • target 规定在何处打开。 （1）_self：默认，在当前窗口打开（覆盖）。 （2）_blank：在新窗口打开。 （3）name（内联框架的名字）：在内联框架中打开。

list

块元素。 无序列表

  • <ul></ul>
  • type （1）disc：默认，实心圆点。 （2）square：实心方块。 （3）circle：空心圆。

有序列表

  • <ol></ol>
  • type （1）1：1. （2）a：a. （3）A：A. （4）i：i. （5）I：I.

列表项 <li></li> 定义列表 <dl> <dt>被定义的内容</dt> <dd>对定义内容的描述</dd> </dl>

通过css去除列表项前面的符号ul{ list-style: none; }

table

<table>
	<thead></thead>
	<tfoot></tfoot>
	<tbody></tbody>
	
	<tr>
		<th>表格头</th>
		<td>表格项</td>
	</tr>
</table>

在创建table时，如果只有tr没有tbody，会自动添加tbody并将tr放在tbody中。

form

<form action="index.html">
	<!-- for属性实现：点label就可以选中name为usrname的输入框。 -->
	<label for="usrname"></label>
	<!-- 输入框；
		value属性显示为文本框默认值。
		autocomplete="off" 关闭自动补全。可以用在form上。
		readonly 将表单项设为只读，数据会提交。
		disabled 将表单项设为禁读，数据不会提交。
		autofocus 设置表单项自动获取焦点。
	-->
	<input id="usrname" type="text" name="usrname" value="aaa"/>
	
	<textarea name="info"></textare>
	
	<input type="button"/>
	<!-- 提交按钮；
		提交后用户填写的信息会附在url地址后面以查询字符串的形式发送给服务器，如：url?val=111；
		value属性显示为按钮上的文字。
	-->
	<input type="submit" value="提交"/>
	<input type="reset"/>

	<!-- 更推荐使用这组按钮，使用更灵活，可以插入图片。 -->
	<button type="button">按钮</button>
	<button type="submit">提交</button>
	<button type="reset">重置</button>

	<input type="password" name="psw"/>
	
	<!-- 选取颜色；ie不支持 -->
	<input type="color"/>
	
	<!-- 单选框；
		同一组name相同；
		checked="checked"则该选项为默认值。 
	-->
	<input type="radio" name="gender" value="female"/>

	<!-- 多选框；
		同一组name相同；
		checked="checked"则该选项为默认值。 
	-->
	<input type="checkbox" name="hobby" value="football"/>

	<!-- 下拉列表；
		multiple="multiple"则可以多选；
		checked="checked"则该选项为默认值。
	-->
	<select name="drink">
		<optgroup label="茶">
			<option value="milktea">奶茶</option>
		</optgroup>
	</select>

	<!-- 表单项也可以分组。  -->
	<fieldset>
		<legend>组名</legend>
	</fieldset>
</form>

center

<center></center> center标签中的内容，会默认在页面中居中显示。

br

换行。 xhtml <br/> html <br>

hr

<hr/> 生成水平线。

em

<em></em> 语气强调（斜体）。

strong

<strong></strong> 内容强调（加粗）。

i

<i></i> 斜体。

b

<b></b> 加粗。

small

<small></small> 字体比父元素的字体要小。 一般用来写细则（合同中的小字，网站的版权声明）。

big

cite

<cite></cite> 一般用来引用书名、歌名、话剧名、电影名等（斜体）。

q

<q></q> 一般用来名言等短引用、行内引用（无法选中）。 内联元素。

blockquote

<blockquote></blockquote> 一般用来长引用、块级引用（单独一块）。

sup

<sup></sup> 设置上标。

sub

<sub></sub> 设置下标。

del

<del></del> 添加删除线。

ins

<ins></ins> 添加下划线，表示填入。

pre

<pre></pre> 预格式标签，保存代码中的格式，不会忽略多个空格。

code

<code></code> 表示代码块。 不会保存格式，一般和pre标签一起使用。<pre> <code></code> </pre>

title属性

当鼠标移入元素时，元素的title属性值作为提示文字显示。 可以给任何标签指定。

语义化标签

header main：每个网页只能有一个 footer nav aside article section：上面的标签都不能表示时就用section

script

一般在body标签的最后引入外部的js文件。 <script type="text/javascript" src=""></script>

html

html中，字符之间写再多的空格/换行都会被当做一个空格解析。 html中，不区分大小写，一般都是使用小写。

网页

  • 结构：HTML
  • 表现：CSS
  • 行为：JavaScript

字符集

ASCII

  • 美国。
  • 7位。

ISO-8859-1

  • 欧洲。
  • 8位。

GBK GB2312

  • 中文系统的默认编码。

UTF-8

  • 万国码

ANSI

  • 根据系统的默认编码来保存。

实体（转义字符串）

html中，某些特殊符号是不能直接使用的，如<和>。 语法

  • &实体名称;
  • &#实体编号;

例子

  • &lt;表示<
  • &gt;表示>
  • &nbsp;表示空格（no break space）
  • &copy;表示版权符号©

图片

JPEG

  • 支持的颜色较多，可以压缩，不支持透明。

JPG GIF

  • 支持的颜色少，只支持简单的透明（直线边），支持动态图。

PNG

  • 支持的颜色多，支持复杂的透明

webp

  • 谷歌新推出的专门用来表示网页中的图片的一种格式。
  • 具有其他图片格式的所有优点。
  • 兼容性不佳。

base64

  • 将图片使用base64进行编码。
  • 直接把base64编码粘到src里就可以使用。
  • 一般需要和网页一起加载的图片才会使用base64。

图片的使用原则

效果

  • 一致：使用小的。
  • 不一致：使用效果好的。

设备端

  • pc端：不建议修改图片大小，需要多大的图片就裁多大。
  • 移动端：经常要对图片进行缩放。

avatar
文章
阅读
粉丝