HTML——常用知识手记

Love The Way You Lie 2021-07-25 17:49 220阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]

--------------------

QQ 1285575001  
Wechat M010527  
技术交流 QQ群599020441  
纪年科技aming

--------------------

### Web 基础 ###

1.XHTML

HTML\[HyperText Markup Language\]:  
超文本标记语言：  
HTML 1.0；HTML 4.0

XHTML\[eXtensibile HyperText Markup Language\]:  
扩展超文本标记语言：  
XHTML 1.0

##### HTML 5 #####

2.标记分类

1》单标记

`<标记名称 />`

2》双标记

`<标记名称>内容</标记名称>`

注意：  
标记名称一定要小些  
标记一定顺序嵌套

行内元素：在一行显示，`span`

块元素：自己占一行，默认占父元素的 100%,`div`

3.属性(对象的特征描述)  
`<标记名称 属性名称="值" 属性名称="值" .../>`  
`<标记名称 属性名称="值"...>内容</标记名称>`

注意：  
A、属性不是必须的  
B、属性不区分先后顺序  
C、属性值一定写在引号之间  
D、多个属性以空格划分  
E、属性名称和值都要是小写

如：`< hr color=”red” width=“20px”/>`

4.XHTML 语法结构

css

<!DOCTYPE DTD> 
     < html xmlns="http://www.w3.org/1999/xhtml">
      < head>
       < meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        < title>Insert title here</title> 
        < /head> 
        < body> 网页主体 < /body>
        < /html>

DTD\[Document Type Defination\]:  
文档类型定义  
告诉我们文档的根元素是谁，html 是文档的根元素，  
根元素可以有哪些 子元素， 子元素又可以有哪些属性

Strict(严格)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional(过渡)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset(框架集)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

html:双标记，整个文档的根元素  
xmlns：命名空间，解决命名的冲突的  
head：头部标记  
title:网页标题

< meta http-equiv='content-type' content='text/html;charset=utf-8'/>:

告诉浏览器以什么编码方式解析什么类型的文档  
注意：所有的编码方式统一 UTF-8

body：网页主体，所写任何内容要写在 body 中  
Web 页面的扩展名.html 或者.htm

5.W3C 标准 http://validator.w3.org  
6.文本标记

加粗：`< b>内容< /b> < strong>内容< /strong>`  
倾斜：`<i>内容</i><em>内容</em>`  
下划线：`<u>内容</u> <ins>内容</ins>`  
删除线：`<s>内容</s> <strike>内容</strike> <del>内容</del>`  
上标：`<sup>内容</sup>`  
下标：`<sub>内容</sub>`  
代码：`<code>内容</code>`  
字体：`<font color="颜色值" size="1~7" face='字体形态'>内容</font>`  
行内元素：`<span>内容</span>`  
块元素：`<div>内容</div>`  
注意：块元素默认占父元素的 100%，自己占一行，配合 CSS 来使用

7.换行和段落

换行：`<br />`  
段落：`<p align="left|center|right">内容</p>`

8.HTML Entities(HTML 实体)  
大于号>：`>`  
小于号<：`<`  
单引号’：`'(IE6 不支持) '`  
双引号"：`"`  
连接符&：`&`  
不间断的空格：`&nbsp`  
版权：`©`  
注册商标：`®`

9.标题

10.水平线

11.HTML 中注释 :

CSS 中注释：  
`/*注释内容…..*/`  
页面显示效果看不到，在源代码中可以看到

12.图片

提示文本的输入格式及 title 用法

必有属性：

src="目标文档的 URL" 
     alt="提示文本" （如：正在加载中）

注意：当 alt 值不为空的时候，通过 title 公共属性来代替

可选属性：

width:宽度
     height:高度
     border:边框
      jpg|jpeg，gif，png

13.路径  
绝对路径：`标准 URL 形式` http://g.hiphotos.baidu.com/image/pic/item/b03533fa828ba61e2e4dd5554234970a304e5 92c.jpg

相对路径：  
从当前文档出发

./:当前目录
    ../:上级目录 
    ../../:上上级目录

`根相对路径：以/开始的路径 (php 所对应服务器根目录)`

14.公共属性(除了 html,link,base,head)

id:
     class: 
     style:
      title:注释，提示文本

15.列表  
无序列表

`<ul type="disc|circle|square|none">`  
`<li>内容</li>`  
`<li>内容</li>`  
`...`  
`</ul>`

有序列表

定义列表

<dl> 
    <dt>下定义的对象</dt>
     <dd>定义</dd> 
     <dd>定义</dd>
      <dd>定义</dd> 
      <dt>下定义的对象</dt> 
      <dd>定义</dd>
       <dd>定义</dd>
        <dd>定义</dd>
         ...
          </dl>

15.表格

table 的属性：

`align='left|center|right'`  
`border='边框'`  
`bordercolor='边框颜色'`  
`width='宽度'`  
`height='高度'`  
`bgcolor='背景颜色'`  
`background='背景图像，目标文档的 URL'`  
`cellpadding='内边距，内容到边框的距离'`  
`cellspacing='外边距，单元格到单元格的距离'`

tr/td/th 属性：

rowspan='合并行' 
    
    注：选择要合并的行数，然后删去被合并的单元格即可 
     colspan='合并列' 
     valign='top|middel|bottom'

#### 超链接 表单 ####

1.超链接  
1》可以通过链接实现页面跳转  
2》 `<a href='目标文档的 URL' target='窗口的展现形式'>链接元素</a>`  
3》文本、图片都可以作为链接元素  
4》

target=‘窗口的形式’

_self:默认值，在当前窗口中打开 
     _blank:新窗口中打开 在指定的框架集的窗口中打开
      _top:在顶层窗口打开
      _parent:在父窗口打开

5》href 的形式  
链接到网页或者是浏览器支持的格式

网页：  
静态网页：.html .htm  
动态网页：和数据库有交互 .php

浏览器支持的格式：  
.jpg .jpeg .png .gif

链接到下载资源:  
可以通过专门的压缩工具或者可以通过程序实现压缩  
直接写压缩之后的文件名称

发送邮件:  
`<a href='mailto:邮箱地址'> 内容</a>`

锚点：  
A、创建锚点 ：`<a name='名称'></a>`  
B、使用锚点：  
锚点和链接在同一文档下 ： `<a href='#锚点名称'>内容</a>`

如果链接和锚点不在同一文档下：  
`<a href='目标文档的 URL#锚点名称'>内容</a>`

通过 id 在标记上定义一个唯一名称，\#id 名称即可找到

核心属性：

id:唯一标识符 
     class 
     style 
     title

空链接

<a href=''>内容</a>
       <a href='#'>内容</a> 
       点击链接原地不动 
       <a href='javascript:void(0)'>内容</a>

链接到 Js 代码  
弹出框 alert()

`<a href='javascript:alert("内容");alert("内容");'>内容</a>`

`<a href="javascript:alert('内容')">内容</a>`

弹出警示对话框 confirm()

`<a href='javascript:confirm("内容")'>内容</a>`

弹出输入框 prompt()

`<a href='javascript:prompt("内容")'>内容</a>`

2.表单  
1》表单的作用：收集客户端信息，发送到服务器端  
2》表单的标记  
`<form action='目标文档的 URL' method='get|post'> </form>`

enctype='x-www-application-urlencode'默认值 
     enctype=’multipart/form-data’ 上传文件必须为此 
      
    
     method='get|post'  
     get:数据附着在地址栏之后 
     post：数据附着在 HTTP 的头信息中
     action='目标文档的 URL'

3》表单中的控件  
单行文本框:text

`<input type='text' name='有意义的名称' value='默认值' maxlength='最大字符数'/>`  
可以通过 placeholder 代替 value

密码框：password  
`<input type='password' name='名称' placeholder='值' maxlength='最大长度'/>`

单选框：radio  
`<input type='radio' name='名称' value='提交值' checked='checked'/>`  
注意：一组类型的单选框名称相同

复选框：checkbox  
`<input type='checkbox' name='名称[]' value='提交值' checked='checked'/>`  
注意：  
一组类型的复选框命名成数组形式  
数组：

名称[] 
     名称[数字] 
     名称[字符]

浏览框：file  
`<input type='file' name='名称'/>`  
注意：  
如果表单有浏览框控件  
`method='post'`  
`enctype='multipart/form-data'`  
告诉表单在发送数据之前如何对数据编码

多行文本框：textarea

readonly='readonly’代表只读

下拉框  
单选下拉框

分组

多选下拉框

multiple='multiple’代表多选  
名称要命名成数组形式

隐藏域：hidden  
`<input type='hidden' name='名称' value='值' disabled='disabled'/>`  
按钮：  
提交按钮  
`<input type='submit' name='名称' value='值' disabled='disabled'/>`  
图片当做提交按钮  
`<input type='image' src='目标文档的 URL' disabled='disabled'/>`  
重置按钮  
`<input type='reset' name='名称' value='值' disabled='disabled'/>`  
自定义按钮  
`<input type='button' name='名称' value='值' disabled='disabled'/>`  
通过 js 控制自定义按钮的行为  
disabled='disabled’代表禁用

#### HTML5 新增： ####

datetime:日期+时间  
datetime-local:本地日期时间

time:时间  
month:月份  
week:一年的内第多少周  
email:检测邮箱的合法性  
url:检测 URL 的合法性  
number:检测数字的合法性  
search:搜索  
range:范围  
tel:电话  
color:颜色  
min:最小值  
max:最大值  
step:步长  
required='required’必须的  
autofocus:自动获得焦点  
autocomplete:自动填写功能

#### 框架集 ####

1.框架集  
1》框架集的语法结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
       <html xmlns='http://www.w3.org/1999/xhtml'>
        <head>
         <title>网页标题</title> 
         <meta http-equiv='content-type' content='text/html;charset=utf-8'/>
          </head>
           <frameset rows='100,*' frameborder='yes(默认值)|no' border='边框大小'>
            <frame src='目标文档的 URL' noresize='noresize' scrolling='yes|no|auto(默认值)'/>
             <frameset cols='150,*'>
              <frame src='目标文档的 URL'/>
               <frame src='目标文档的 URL'/>
                </framset>
                 </frameset> 
                 <noframes> 
                 <body>
                 <h1>Sorry 您的浏览器不支持框架集</h1> 
                 </body>
                  </noframes>
                   </html>

2.iframe  
嵌套网页  
`<iframe src='目标文档的 URL'></iframe>`

3.音频

controls:控制面板  
autoplay:自动播放  
loop:循环播放  
muted:静音输出

4.视频

5.meta

设置编码 
    <meta http-equiv='content-type' content='text/html;charset=utf-8'/> 
    告诉浏览器以什么编码方式解析什么类型的文档 
    
    
    实现刷新
     <meta http-equiv='refresh' content='秒数'/> 
    实现重定向 
    <meta http-equiv='refresh' content='秒数;url=目标文档的 URL'/> 
    关键字
     <meta name='keywords' content='关键词,关键词,...' /> 
     描述
     <meta name='description' content='描述的内容'/> 
     作者
     <meta name='author' content='king'/>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]: /images/20210725/288cdc02b73342d4a48bc8bfcce7f190.png