HTML基础速查速记

lilming
159 阅读4分钟

HTML基础

HTML语法结构

<!doctype html>
<html lang="en">
  <head>
    
  </head>
  <body>
    
  </body>
</html>

头部head

  1. title标签
<title>显示在浏览器的标题栏上</title>
  1. 元信息meta标记
  • 编码和自适应
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
  • 网站描述
<meta name="keywords" content="（关键字）">
<meta name="descript" content="（描述）">
<meta name="author" content="（作者）">
<meta name="generator" content="（制作所用的软件）">
<meta name="copyright" content="（版权所有）">
<meta name="revisit-after" content="7 days" >//设置搜索引擎的抓取频率
<meta name="robots" content="none">
1、none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
2、noindex : 搜索引擎不索引此网页。
3、nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
4、all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
5、index : 搜索引擎索引此网页。
6、follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
  • 向浏览器头部(响应头)返回信息
<meta http-equiv="refresh" content="30">//每30秒刷新一次
<meta http-equiv="Pragma"content="no-cache"> //禁止从缓存中读取HTML
<meta http-equiv="refresh" content="2";URL=http://www.haorooms.com">//两秒刷新并且指向新页面
<meta http-equiv="expires" content="（GMT时间格式）">//设置到期时间
<meta http-equiv="content-Type" content="text/html;charset=gb2312"> 
<meta http-equiv="charset" content="iso-8859-1">

主体body

不建议使用
<body text="rgb(00,00,00)" bgcolor="#f0f0f0" background="" link="rgb(0%,100%,0%)" alink="white" vlink="red" topmargin="60px>

格式化文本和段落

标题字

<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
  • align属性
  1. left
  2. center
  3. right
  4. justfiy

空格、回车、分割线和特殊字符

  • 空格和特殊字符
&nbsp;	( )
&lt;   	(<)
&gt; 		(>)
&amp;   (&)
&quot;  (")
&times; (×)
&divide;(÷)
&cope;  (©)版权
&reg;   (®)注册商标
&trade;	(™)商标
  • 回车和分割线
<br>或者<br/>
<hr width="(百分比或者像素px)" size="像素px" color="" align="left|center|right">

字体font标记

基本语法：

<font face="字体（如：黑体，默认宋体）" color="颜色" size="字号（1~7|-1~-7|+1~+7）">...</font>

段落p

<p align=""></p>

段落缩进blockquote

<blockquote>缩进5个字符位置</blockquote>
<blockquote><blockquote>缩进10个字符位置</blockquote></blockquote>

预格式化pre

<pre>
          春 晓
春眠不觉晓⑴，处处闻啼鸟⑵。
夜来风雨声⑶，花落知多少⑷。
</pre>

列表

无序列表unordered

type的属性值：

  • disc      实心圆
  • circle    空心圆
  • square    实心正方形
<ul type="">
  <li type=""></li>
  <li type=""></li>
</ul>

有序列表orderly

<ol type="1|A|a|i|I" start="数值（初始数字）" >
  <li type=""></li>
  <li type=""></li>
</ol>

定义列表

<dl>
  <dt>项目一</dt>
    <dd>描述一<dd>
    <dd>描述二</dd>
  <dt>项目二</dt>
    <dd>描述一</dd>
    <dd>描述二</dd>
<dl>

超链接和浮动框架

超链接语法

<a href="文件路径" name="anchor名称" title="提示信息" target="打开方式">超链接</a>

FTP站点访问链接

<a herf="ftp://服务器IP地址或域名">超链接文字</a>

电子邮件超链接

<a href="mailto:E-mali邮箱地址？subject=邮件主题">

页面标签

  1. 定义书签
<a  name="书签名">书签标题</a>
  1. 定义书签链接
<a href="#书签名">书签标题</a>同页跳转 
<a href="URL#书签名">书签标题</a>异页跳转

浮动框架

<iframe neme="iframename" src="URL" width="" height="" frameborder="框架边框" scrolling="滚动条" 
marginwidth="左右边距" marginheight="上下边距"></iframe>

图像和多媒体文件

图像img

  • 基本语法
<img src="URL" alt="替代文本">
属性值说明属性值说明
alttext鼠标悬停在图片上时出现的文字，加载失败时会代替图片aligntopmiddlebottomleftcenterright排列方式
srcURL图片的链接boderpixels边框
nametext名称hspacepixels左侧和右侧的空白
heightpixels高vspacepixels顶部和底部的空白
widthpixels宽usemapURL将图像定义为客户器端图像映射

图像链接与热区链接

  • 为图像设置超链接
<a herf="URL" target="打开方式"><img src="URL"></a>
  • 为图像设置热区链接
<img src="URL" usemap="映射图像名称">
<map  name="映射图像名称">
  <area  shap="热区形状" coords="热区坐标" href="URL">
  <area  shap="热区形状" coords="热区坐标" href="URL">
  ...
</map>
shape值coords值说明
rect（矩形）x1,y1,x2,y2矩形的四个坐标
circle（圆形）center-x,center-y,radius圆心坐标和半径
poly（多边形）x1,y1,x2,y2,x3,y3...各顶点坐标

滚动文字

  • 基本语法
<marquee><h4>滚动文字</h4></marquee>
  • 属性设置
属性值说明属性值说明
bgcolor颜色背景颜色scrollamount数字，单位是像素滚动速度
loop数字循环次数scrolldelay数字，单位是毫秒滚动延迟
directionup down left right滚动方向width数字，单位像素滚动水平范围，默认浏览器的宽
behaviour- scroll循环滚动（默认）
  • slide滚动一次
  • alternate来回交替滚动 | 滚动方式 | hight | 数字，单位像素 | 高，默认字体高度 | | | | | hspace | 数字，单位像素 | 左侧和右侧的空白 |

音频，视频和Flash

<embed src="URL" width="" higth="" autostart="true|false(是否自动播放)" loop
="true|false(是否循环)"></embed>

div和span

div图层

表格

基本语法

<table>
  <tr>
    <th>姓名</th>
    <th>班级</th>
  </tr>
  <tr>
    <td>王戴铭</td>
    <td>会计3班</td>
  </tr>
</table>

表格美化：属性设置

属性值描述属性值描述
alignleftrightcenter内容对齐rulesnoneallrowscolsgroups规定内边框哪个是可见的
bgcolor背景颜色heightpixels表格高度
borderpixels边框宽度widthpixels表格宽度
cellpaddingpixels边缘与内容之间的空白bordercolorrgb边框颜色
cellspacingpixels单元格之间的空白bordercolorlightrgb设置亮边框（左上）
frameabovebelowhsidesvsideslhsbordervoid规定外边框哪个部分可见bordercolordarkrgb设置暗边框（右下）

表格边框属性

属性值描述
borderpixels宽度
bordercolorrgb边框颜色
bordercolorlightrgb设置亮边框（左上）
bordercolordarkrgb设置暗边框（右下）

表格样式frame和rules

fram属性值描述rules属性值描述
above上none无
below下all所有
hsides上下rows行边框
vsides左右cols列边框
lhs左groups介于行列间边框
rhs右
border上下左右
void无

行属性

属性值描述属性值描述
alignleftrightcenter水平对齐bordercolorlight
valigntopbottommiddle垂直对齐bordercolordark
bgcolorbordercolor

单元格属性

属性值描述属性值描述
alignleftrightcenter水平对齐bordercolorlight
valigntopbottommiddle垂直对齐bordercolordark
bgcolor背景颜色rowspanint单元格跨行
background背景图案colspanint单元格跨列
bordercolor边框颜色width
heith
avatar
文章
阅读
粉丝