一、HTML概述
HTML指的是超文本标记语言(Hyper Text Markup Language)
超文本:是指页面内可以包含图片、链接、声音,视频等内容
标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)
浏览器通过不同的HTML标签,解析成我们看到的网页
二、HTML基础语法
声明
html4的文档声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
html5的文档声明
<!DOCTYPE html>
如果不声明解析网页时会产生一些不可预期的行为,所以我们应该避免出现。
Head标签(标签)包含了所有的头部标签标签。
头部区域的标签标签为: <title>, <style>, <meta>, <link>, <script>
<title>标签可定义网页的标题
<meta> 标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新
频度的描述和关键词。
<meta> 标签位于文档的头部
<meta charset="utf-8" />
标题处添加图标
<link rel="icon" href="ico地址">
基本结构:
一个html的基本结构如下:
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
标签
HTML中的标记通常被称为HTML标签 (HTML tag)。HTML使用标记标签来描述网页
HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
结构
<标签名>标签内容</标签名> 闭合标签(有标签内容)
<标签名/> 自闭合标签 (无标签内容)
标签属性
标签属性:标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如:<body text=”red”>
1.属性的格式 :属性名 = “属性值“
2. 属性的位置: <标签名 属性名 = “属性值“ >xxx</标签名>
3. 添加多个属性: <标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>
三、基本常用标签
标题标签<h1></h1>…..<h6></h6>
属性align设置标题的水平位置(left center right)
段落标签 <p></p>
换行标签 <br/>
列表
无序列表<ul><li></li></ul> ul->unordered list li->list item
有序列表<ol><li></li></ol> ol->ordered list
超链接<a></a>
<a href=“http://www.baiduc.om(定义链接地址)” target=“_blank(打开链接文档的位置)”>百度</a>
<a href=“login.html” target =“_blank”>登录</a>
target:默认值为_self
href(Hypertext reference)超文本引用 规定链接指向的页面的URL(页面地址)
URL(Uniform Resourse Locator) 统一资源定位符
图像标签<img/>
<img>属性有src width height border
图片的宽高一般不建议使用
特殊符号转义
在HTML中预留了一些字符。 这些预留字符是不能在网页中直接使用的。
比如< 和 >,我们不能直接在页面中使用< 和 >号,因为浏览器会将它解析为html签。
例如:<b> 会被解析为b标签,空格,再多的空格都会当一个空格处理。
为了可以使用这些预留字符,我们必须在html中使用字符转义。
小于号 < 版权(C) © ©
大于号 > 商标(TM) ™ ™
空格 注册商标(R) ® ®
四、表格
表格的基本组成标签
table标签:表格标签
tr标签:表格中的行
th标签:表格的表头
td标签:表格的单元格
表格的基本结构:
<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>
表格属性:
width height cellspacing cellpadding align valign cospan rowspan
其中cellspacing属性用来表示单元格与单元格之间的外边距,cellpadding用来表示表格内边距(内容到边框的距离),valign(vertical align)表示垂直水平位置其中有top,middle,bottom,cospan(column span)表示列的合并,rowspan表示行的合并
五、表单
form标签:表单
网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器.
<form action = “http://www.sohu.com” method="post"> ... </form>
input标签:
文本:
<input type="text" name = "username" value="张三" readonly ="readonly" placeholder="请输入" disabled="disabled" />
密码框:
<input type="password" name="password" value="123456"/>
单选按钮:
<input type="radio" name="gender" value="男" checked="checked" />
<input type="radio" name="gender" value="女" />
复选框:
<input type="checkbox" name="course" value="java"/> java
<input type="checkbox" name="course" value="c"/> c
<input type="checkbox" name="course" value="sql"/> sql
<input type="checkbox" name="course" value="html"/> html
文件选择框:
<input type="file" name="file" value="img" />
按钮:
<input type="button" name="button" value="普通按钮" />
提交按钮:
<input type="submit" name="submit" value"提交" />
重置按钮:
<input type="reset" name="reset" value="重置" />
以上所有都是input标签的一种,其中name属性是用来指定该输入控件的名称,通常在表单提交时与其对应的值一起发送到后端,value是用来设置输入的默认值
select标签:
<select name="province">
<option>请选择</option>
<option value="100">山西</option>
<option value="101" selected="selected">陕西</option>
<option value="102">河南</option>
</select>
下拉框的name,id,事件等需要在select中定义,而value需要在option中定义。
textarea标签:
<textarea name="textarea" cols="40" rows="6"> ... </textarea>