一.HTML文档基本结构
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
二.常用HTML标签（元素）
- 文本标签：
(<h1>—<h6>)标题大小、<i>标签、<p文>本段落、<span>文本容器、<br>换行符、 - 链接标签：
<a href="_url_" name="_锚_" target="_blank(_跳转到新的标签页_)">https://www.baidu.com</a> - 图像标签：
<img src="_url_" alt="_替代文本(属性)_"> - 表格标签：boder为表格边框属性，一个表格可以thead、thbody甚至tfoot构成
<table border="1">
<caption>表格标题</caption>
<thead>
<tr>
<th>row 0, cell 1</th>
<th>row 0, cell 2</th>
</tr>
</thead>
<tbody>
<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>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>row 4, cell 1</td>
<td>row 4, cell 2</td>
</tr>
</tfoot>
</table>
表格标签.png
- 列表标签:(列表可以层层嵌套，列表子标签可以嵌套其他的标签元素)、
- 有序列表
<ol> <li>Coffee</li> <li>Milk</li> </ol> - 无序列表
<ul> <li>Coffee</li> <li>Milk</li> </ul> - 自定义列表
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
-
格式化标签：
HTML文本格式化标签.png
-
计算机输出标签：
HTML计算机输出标签.png
-
引用标签：
HTML引用标签.png
-
头部标签：
HTML头部标签.png
三.常用HTML属性
- 背景颜色（Bgcolor）：颜色不同书写方式；六进制数、RGB 值或颜色名
<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> - 背景（Background）
<body background="_url_"> - 边框（border）：多用于表格
- 样式（style）:设置width、height、color、background-color等属性值
<html> <body> <p style="widht:100px;height:200px;text-align:center;background-color:red; font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
四.HTML中块级元素和内联元素
- 块级元素（block element）：
<div>, <h1>, <p>, <ul>, <table>等 - 内联（行类）元素（inline element）:
<span>, <b>, <td>, <a>, <img>等
五.HTML的类和id以及css样式以及javaScript脚本引入方式
<html>
<head>
//引入css样式的两种方式：<style>标签， <link>标签
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
#id{}
.class{}
</style>
</head>
<body>
<div id="" class="">
</div>
</body>
<script src="_url_">
</script>
<script type="text/javascript">
</script>
</html>
六. HTML 表单（此部分内容较多且时刻运用在网页设计中，如下拉列表、输入框、导航栏等，所以单独剃出来详解一下）
-
<form> 元素：定义 HTML 表单，其属性包含如下：
form属性.png
method获取方式.png
-
<input> 元素：最重要的表单属性，根据 type 属性可以定义多种表单类型 text (文本输入框)、password (密码输入框)、radio (单选框)、checkbox (复选框)、submit (提交按钮)、button (按钮)等。
-
文本输入框
输入类型：text.png
-
密码输入框
输入类型：password.png
-
单选框
输入类型：radio.png
-
复选框
输入类型：checkbox.png
-
提交按钮
输入类型：submit.png
-
一般按钮
输入类型：button.png
-
HTML5 新增 type 输入类型：
html5输入类型.png
-
<select> 元素：下拉列表，<option> 表示列表项，添加 selected 属性表示默认首选项。<select name="cars"> <option value="volvo">Volvo</option> <option value="saab" selected>Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
select：下拉列表.png
-
<textarea> 元素: 定义多行输入字段(文本域)，rows、cols定义行和高，内容大于指定区域则出现scroll滚动栏。<textarea name="message" rows="10" cols="30"> 文字区域...... </textarea>
textarea文本域.png
-
<button> 元素：定义点击按钮，onclick 属性可以绑定点击事件。<button type="button" onclick="alert('Hello World!')">Click Me!</button> -
<fieldset> 元素：组合表单数据，其中 <legend> 元素为 <fieldset> 元素定义标题。<form action="action_page.php"> <fieldset> <legend>Personal information:</legend> 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"></fieldset> </form> -
<datalist> 元素：为 <input> 元素规定预定义选项列表。<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。<form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
datalist预定义选项列表.png
网友评论