pangzibo243's blogHomeArchivesTagsCategories
HTML 入门
|HTML

HTML 入门

HTML5 元素表：

http://www.html5star.com/manual/html5label-meaning/

img

HTML head

元素是所有头部元素的容器。 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：title、base、link、meta、script 以及 style。

  • title: 定义文档标题
  • base: 都没货页面上所有链接的默认地址或默认目标
  • link: 定义文档与外部资源（外链样式表等）之间的关系
  • style: 定义文档的样式信息（内联样式表）
  • meta: 定义关于html文档的元数据
  • script: 定义客户端脚本（插入js）
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 防止乱码 -->
    <meta charset="utf-8">
    
    <title>定义文档标题</title>
    
    <base href="https://www.baidu.com/img/" />
	<base target="_blank" />
    
    <!-- 外联样式表   -->
	<link rel="stylesheet" type="text/css" href="style.css" />  
 
	<!-- ⽂档tag图标   -->
	<link rel="shortcut icon" type="image/x-icon"  href="http://www.baidu.com/favicon.ico" />
    <!-- 比shortcut icon 多支持gif，推荐一般时候使用shortcut icon -->
    <link rel="icon" type="image/x-icon"  href="http://www.baidu.com/favicon.ico" />
    
    <style type="text/css">
		P{
			color: blue;
		}
		h1{
			color: red;
		}
	</style>
    
    <!-- 编写发送浏览器的头部信息 -->
    <!-- content-type: text/html;charset=utf-8 -->
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />  
	<!-- charset:iso-8859-1 -->
	<meta http-equiv="charset" content="iso-8859-1">
	<!-- expires:31 Dec 2008 -->
	<meta http-equiv="expires" content="31 Dec 2008">
 
	<!-- SEO   -->
	<!-- keyords 常用于搜索引擎可进行模糊搜索到该网站的关键字 -->
	<meta name="keywords" content="8-12个以英⽂逗号隔开的单词或词语">  
	<!-- description 是网站的相关介绍 -->
	<meta name="description" content="80字以内的⼀段话，与⽹站内容相关"> 
 
	<!-- viewport 进行移动界面自适配，并且禁止用户进行修改适配大小   -->
	<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no"  />
    
    <!-- 可以放在head内也可以放在body内和外，通常放在body下，html内   -->
	<script type="text/javascript"></script>
    
</head>
 
<body>
    
    <!-- 通过相对路径查找文件，默认从base指定路径文件夹内寻找
	即：https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png -->
	<img src="xinshouye_353af22a7f305e1fb6cfa259394dea9b.png" /><br />
    
    <h1>hello style</h1>
	<p>hello h5</p>
    
    <script type="text/javascript">
    <!-- js代码块   -->
    document.write("<h1>Hello World!</h1>")
    </script>
    
</body>
    
    <script type="text/javascript"></script>
    
</html>

HTML 基本元素

  • a: 超链接
  • b: 粗体
  • em: 斜体
  • u: 下划线
  • s: 删除线
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本元素</title>
</head>
<body>

    <a href="http://www.w3school.com.cn">W3School</a> <br />
    hello world! <br />
    <b>hello world!</b> <br />
    <em>hello world!</em> <br />
    <u>hello world!</u> <br />
    <s>hello world!</s> <br />

</body>
</html>

html 表格元素

  • table: 表格
  • tr: 行
  • td: 数据
  • caption: 标题

一个简单的表格：

<table border="1">
    <caption>简单表格</caption>
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
</table>
  • th:表头
<table border="1">
    <caption>简单表格</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
        <td>学生</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>程序员</td>
    </tr>
</table>

合并单元格：

<table border="1" width="300px">
    <caption>简单表格</caption>
    <tr>
        <th rowspan="4">基本情况</th>  //rowspan="4"表示占一列的4个单元格
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
        <td>学生</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>程序员</td>
    </tr>
    <tr>
        <td colspan="3">共统计：2人</td>  //colspan="3"  表示水平共占3个单元格。
    </tr>
</table>

表头和表脚：

使用thead可以指定一行为表头，可以在代码的任何地方。表头的内容是粗体显示，居中。
tfoot 表示表脚。显示的指出哪一行为表脚
tbody表示表的主体部分，可以不写

<table border="1" width="300px">
    <caption>简单表格</caption>
    <thead>
    <tr>
        <th rowspan="4">基本情况</th>  //rowspan="4"表示占一列的4个单元格
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    </thead>
    <tr>
        <td>张三</td>
        <td>20</td>
        <td>学生</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>程序员</td>
    </tr>
    <tfoot>
    <tr>
        <td colspan="3">共统计：2人</td>  //colspan="3"  表示水平共占3个单元格。

    </tr>
    </tfoot>

</table>

html 列表元素

  • ol: 有序列表
  • ul: 无序列表
  • li: 列表中的项
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ol type="i">
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ol>

<ol reversed>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ol>

<ol>
    <li>处理图像</li>
    <ol type="a">
        <li>在页面中插入图片</li>
        <li>在图片和文件打印样式中提取文本</li>
        <li>在笔记本页中插入屏幕剪辑</li>
    </ol>
</ol>

<ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>

</body>
</html>

HTML 表单

  • form: HTML表单，用于收集用户输入。
  • input: 表单元素，根据不同的type属性有不同的形态
<!--文本输入<input type="text">-->
<form>
    First name: <br />
    <input type="text" name="firstname" /> <br />
    Last name: <br />
    <input type="text" name="lastname" /> <br />
</form>
<!--单选按钮输入<input type="radio">-->
<form>
    <input type="radio" name="sex" value="male" checked /> Male <br />
    <input type="radio" name="sex" value="female" /> Female <br />
</form>
<!--提交按钮<input type="submit">-->
<form action="action_page.php">
    First name:<br />
    <input type="text" name="firstname" value="Mickey">
    <br />
    Last name:<br />
    <input type="text" name="lastname" value="Mouse">
    <br /><br />
    <input type="submit" value="Submit">
</form>
  • select: 下拉列表
<!--下拉列表-->
<form>
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi" selected>Audi</option>
    </select>
</form>
  • textarea: 多行输入字段
<!--多行输入字段-->
<form>
    <textarea name="message" row="100" cols="100">
        The cat was playing in the garden.
    </textarea>
</form>
  • button: 定义可点击的按钮
<!--按钮-->
<form>
    <button type="button" onclick="alert('Hello World!')">Click Me!</button>
</form>
  • datalist: 预定义选项列表
<!--预定义选项列表-->
<form  action="action_page.php">
    <input type="text" list="browsers" />
    <datalist id="browsers">
        <option value="Internet Explorer" />
        <option value="Firefox" />
        <option value="Chrome" />
        <option value="Opera" />
        <option value="Safari" />
    </datalist>
</form>
  • input type=”password”: 定义密码字段
<form>
    User name:<br/>
    <input type="text" name="username"/>
    <br/>
    User password:<br/>
    <input type="password" name="userpassword"/>
</form>
  • input type=”submit”: 定义提交表单数据至表单处理程序的按钮
<form action="action._page.php">
    First name:<br/>
    <input type="text" name="firstname" value="Mickey"/>
    <br/>
    Last name:<br/>
    <input type="text" name="lastname" value="Mouse"/>
    <br/><br/>
    <input type="submit" value="Submit"/>
</form>
  • input type=”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
    <br/>
</form>
  • input type=”button”: 定义按钮
<form>
    <input type="button" onclick="alert('Hello World!')" value="Click Me!"/>
</form>
  • input type=”number”: 包含数字值的输入字段
<form>
    Quantity(beween 1 and 5)
    <br/>
    <input type="number" name="quantity" min="1" max="5"/>
    <br/>
    Point
    <input type="number" name="points" min="0" max="100" step="10" value="30">
    <br/>
</form>
  • input type=”date”: 包含日期的输入字段
<form>
    Birthday:<br/>
    <input type="date" name="bday"/>
    <br/>
    Enter a date before 1980-01-01:
    <input type="date" name="bday" max="1979-12-31"/><br/>
    Enter a date after 2000-01-01:
    <input type="date" name="bday" min="2000-01-02"/><br/>
</form>
  • input type=”color”: 包含颜色的输入字段
<form>
    Select your favorite color:<br/>
    <input type="color" name="favorite_color"/>
</form>
  • input type=”range”: 包含一定范围的输入字段
<form>
    <input type="range" name="points" min="0" max="10"/>
</form>
  • input type=”time”:允许用户选择时间
<form>
    Select a time:
    <input type="time" name="usr_time"/>
</form>

HTML 图像

<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" width="50" height="50" />

制作图像链接：

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

分区响应图：

<img src="https://www.w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets"/>

<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href="https://www.w3school.com.cn/i/eg_venus.gif" target="_blank" alt="Venus"/>
<area shape="circle" coords="129,169,10" href="https://www.w3school.com.cn/i/eg_merglobe.gif" target="_blank" alt="Mercury"/>
<area shape="rect" coords="0,0,110,260" href="https://www.w3school.com.cn/i/eg_sun.gif" target="_blank" alt="SUn"/>
</map>

HTML5 视频

当前，video 元素支持三种视频格式：

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

<video src="https://www.w3school.com.cn/i/movie.ogg" width="320" height="240" controls="controls">
    Your browser does not support the vedio tag.
</video>

做视频格式适配：

<video wid="320" height="240" controls>
    <source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg"/>
    <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4"/>
    Your browser does not support the video tag.
</video>

参考

https://blog.csdn.net/qq_33961117/article/details/82774331

http://www.html5star.com/manual/html5label-meaning/

https://www.w3school.com.cn/html/

https://blog.csdn.net/qq_41490873/article/details/94365120

Author: pangzibo243
Link: https://litianbo243.github.io/2019/10/20/HTML-入门/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
HTML学习HTML
支付宝打赏
微信打赏