HTML | mayylu's blog

前言

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．
通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

611653455

基本结构

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容


head

base标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head><base href="http://www.runoob.com/images/" target="_blank"></head>

link标签定义了一个文档和外部资源之间的关系

<link rel="stylesheet" type="text/css" href="theme.css">

1. rel         必需。定义当前文档与被链接文档之间的关系    
值	        描述
alternate	链接到该文档的替代版本（比如打印页、翻译或镜像）。
author	    链接到该文档的作者。   
help	    链接到帮助文档。
icon	    导入表示该文档的图标。  
license	    链接到该文档的版权信息。
next	    表示该文档是集合中的一部分，且集合中的下一个文档是被引用的文档。  
prefetch	规定应该对目标资源进行缓存。   
prev	    表示该文档是集合中的一部分，且集合中的上一个文档是被引用的文档。
search	    链接到针对文档的搜索工具。
stylesheet	导入样式表(css外部样式表)   
2. type	MIME_type	规定被链接文档的 MIME 类型。  
3. sizesNew	HeightxWidth/any    定义了链接属性大小，只对属性rel="icon" 起作用

meta标签提供了 HTML 文档的元数据

实例 1 - 定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

实例 2 - 定义web页面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">

实例 3 - 定义页面作者：
<meta name="author" content="Hege Refsnes">

实例 4 - 每30秒刷新页面：
<meta http-equiv="refresh" content="30">

script标签用于定义客户端脚本

style标签定义 HTML 文档的样式信息(css内部样式表)

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>

选择器


1. CSS 中 id 选择器以 "#" 来定义。   
以下的样式规则应用于元素属性 id="para1":    
#para1
{
    text-align:center;    
    color:red;   
}

2. 类选择器以一个点"."号显示：  
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:  
p.center {text-align:center;}  

3. 关系选择器   
后代选择器(以空格     分隔,空格后为后代)   
子元素选择器(以大于 > 号分隔）   
普通兄弟选择器（以波浪号 ～ 分隔）   
相邻兄弟选择器（以加号 + 分隔） 

4. 伪类选择器    

选择器	            示例	         示例说明
:empty	        p:empty	            选择所有没有子元素的p元素   
:checked	    input:checked	    选择所有选中的表单元素
:disabled	    input:disabled	    选择所有禁用的表单元素
:enabled	    input:enabled	    选择所有启用的表单元素
:optional	    input:optional	    选择没有"required"的元素属性
:required	    input:required	    选择有"required"属性指定的元素属性
:in-range	    input:in-range	    选择元素指定范围内的值   
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:invalid	    input:invalid	    选择所有无效的元素   
:valid	        input:valid	        选择所有有效的元素
:last-child	    p:last-child	    选择所有p元素的最后一个子元素  
:first-child	p:first-child	    选择所有p元素的第一个子元素  
:not(selector)	:not(p)	            选择所有p以外的元素
:only-child	    p:only-child	    选择所有仅有一个子元素的p元素
:first-letter	p:first-letter	    选择每个<p> 元素的第一个字母
:first-line	    p:first-line	    选择每个<p> 元素的第一行
:first-child	p:first-child	    选择器匹配属于任意元素的第一个子元素的p元素
:before	        p:before	        在每个<p>元素之前插入内容
:after	        p:after	            在每个<p>元素之后插入内容
:first-of-type	p:first-of-type	    选择的每个p元素是其父元素的第一个p元素
:last-of-type	p:last-of-type	    选择每个p元素是其父元素的最后一个p元素   

5. 属性选择器   
[title=runoob]
{
    border:5px solid green;
}   

input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

body

组成元素

标题

<h1>这是一个标题</h1>    
<h2>这是一个标题</h2>     
<h3>这是一个标题</h3>

段落

<p>这是一个段落。</p>    
<p>这是另外一个段落。</p>   

1. 换行<br>
<p>这个<br>段落<br>演示了分行的效果</p>

2. 文本

标签	描述                
<b>	    定义粗体文本         
<em>	定义着重文字
<i>	    定义斜体字           
<small>	定义小号字
<strong>定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字          
<code>	定义计算机代码

2022-02-11 215429

链接

<a href="https://www.mayylu.top"  target="_blank"(在新窗口打开文档) >这是一个链接</a>   
1. css链接样式   
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

图像

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

音频

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

<audio> 标签定义声音
属性		    描述
autoplay		如果出现该属性，则音频在就绪后马上播放。
controls		如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop		    如果出现该属性，则每当音频结束时重新开始播放。
muted		    如果出现该属性，则音频输出为静音。
src	            规定音频文件的 URL。

音频格式的MIME类型
Format    MIME-type
MP3        audio/mpeg
Ogg        audio/ogg
Wav        audio/wav

表格

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元

2022-02-11 230614

列表

1. 无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2. 有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>  
3. 自定义列表
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
浏览器显示如下：
Coffee
-black hot drink
Milk
-white cold drink


ul是unordered lists的缩写 (无序列表)     

li是list item的缩写 （列表项目）    

ol是ordered lists的缩写（有序列表）    

dl是definition lists的英文缩写 (自定义列表)     

dt是definition term的缩写 (自定义列表组)     

dd是definition description的缩写（自定义列表描述）

表单

action URL 规定当提交表单时向何处发送表单数据。

method post 规定用于发送表单数据的 HTTP 方法。

name name 元素的名称(如文件上传中为$_FILES数组提供数组名，js中document.getElementsByName的调用)

value 属性对于不同 input 类型，用法也不同：

对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始（默认）值
对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

enctype application/x-www-form-urlencoded(默认)
multipart/form-data
text/plain 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=”post” 的情况）

1. 单选按钮（Radio Buttons）
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>  

2. 复选框（Checkbox）
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>   

3. 密码字段(password)
<form>
Password: <input type="password" name="pwd">
</form>   

4. 文本域（Text Fields）  
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>  

其他type还有
color   
date    
datetime    
datetime-local     
email       
month   
number      
range(滑动条)   
search    
tel(电话号码)    
time
url
week   

5. 按钮(button)  
属性	            值	             描述
disabled	        disabled	    规定应该禁用该按钮。
formactionNew	        URL	        规定当提交表单时向何处发送表单数据。

formenctypeNew	    application/x-www-form-urlencoded
                    multipart/form-data
                    text/plain	    规定在向服务器发送表单数据之前如何对其进行编码。

formmethod	        get
                    post	        规定用于发送表单数据的 HTTP 方法。
                    

type	        button              按钮是可点击的按钮
                reset               清除表单数据   
                submit              提交按钮,默认值 	        

value	            text	        规定按钮的初始值。可由脚本进行修改。 

6. 选择选项(select option)
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

2022-02-12 152657

布局

1. <header>元素主要用于定义内容的介绍展示区域.在页面中你可以使用多个<header> 元素.     
2. <nav> 标签定义导航链接的部分。      
3. <article> 标签定义独立的内容。   
4. <section> 标签定义文档中的节（section、区段）。
5. <aside> 标签定义页面主区域内容之外的内容（比如侧边栏） 
6. <div> 标签定义了文档的区域，块级 (block-level)
7. <span> 标签用来组合文档中的行内元素， 内联元素(inline)

2022-02-12 161722

定位

static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

div.static {
position: static;
border: 3px solid #73AD21;}

fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
1
2
3
4
5
6
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

sticky 定位
当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

div.sticky {
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

relative 定位

相对定位元素的定位是相对其正常位置。

h2.pos_left
{
    position:relative;   
    left:-20px;   
}
h2.pos_right
{
    position:relative;   
    left:20px;   
}

移动相对定位元素，但它原本所占的空间不会改变。
5. absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。