HTML

HTML概述

• HTML指的是超文本标记语言 (HyperText Markup Language)

​ 超文本:是指页面内可以包含图片、链接、声音,视频等内容

​ 标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

• 用HTML语言把我们需要显示的内容显示在浏览器上，但是HTML语言本身并不显示
• Web浏览器根据不同的HTML标签，解析成我们看到的网页

HTML基本语法

声明

• html4的文档声明

• html5的文档声明

如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现

Head标签(标签)包含了所有的头部标签标签

可以添加在头部区域的标签标签为:

Html基本结构

…标签标记HTML 文档的开始和结束 …标签包含文本、图像和链接

Html注释

注释后的内容不会显示在网页上

标签

HTML中的标记指的就是标签

HTML使用标记标签来描述网页

结构：<标签名>标签内容</标签名> 闭合标签(有标签内容)

    <标签名/> 闭合标签 (无标签内容)

标签属性：标签可以拥有属性。属性进一步说明了该标签的显示或使用特性。如：

1.属性的格式 ：属性名 = “属性值“

2.属性的位置：

​ <标签名 属性名 = “属性值“ >xxx</标签名>

3.添加多个属性：

​ <标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

标题标签

……

段落标签

换行标签

列表 无序列表

​ 有序列表

超链接

图像标签

标题标签

一级标题

​

二级标题

​

三级标题

​

四级标题

​

五级标题

​

六级标题

特殊符号转义 ： 小于号< 版权©

​ < ©

​ 大于号> 商标™

​ > ™

​ 空格 注册商标®

​   ®

超链接

a标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接来访问其他网页资源。

百度

<a href=“login.html” target =“_blank">登录

_target:默认值为_self

__target="__self"在当前窗口打开新文档

__target="_self"在新窗口打开新文档

href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址)

URL(Uniform Resource Locator)统一资源定位符

定义锚点： name属性值可以自定义

超链接：

图像标签

<img src=“img/demo.jpg”width=“300”height=“150“border=” 1 ” alt=“美丽的图片”/>

只是引入项目中的图片地址，并不是将图片存储到html中

title 鼠标移动到标签上 提示信息

alt 图片加载不出来 显示信息

表格标签

table标签：表格标签

tr标签：表格中的行

th标签:表格的表头

td标签：表格单元格

表格标题：

边框属性：border=“number”

背景图像属性：backround=“图片位置”

背景颜色：bgcolor=“颜色”

width,height属性：width=“300” height=“300”

cellpadding(填充)：cellpadding=“值”

cellspacing(间距)：cellspacing=“值”

align：表格的位置由

元素的align属性决定，可选值包括left,center,right

valign：表格内文字的位置由的align和valign决定的，valign可选值包括top,middle,bottom

colspan属性(跨列合并单元格)：colspan=“number”

rowspan属性(跨行合并单元格)：rowspan=“number”

表单

form标签：表单

网页表单中有许多可以输入或选择的组件用户可以在表单中填写信息最终提交表单把客户端数据提交至服务器

action=“url” 向服务器端发送的地址

method=“post或get” 向服务器端发送数据方式

表单组件：

密码框基本语法：<input type=“password ”(密码框) value=“ 123456 ”(初始密码) size=“22”(密码区宽度)/>

单选按钮基本语法：<input type=“radio” (单选按钮) value=“男”(初始值) checked="checked“(默认选中)/>

复选框基本语法：<input type=“checkbox”(复选框) name="cb2“ (复选框名) value="talk“(复选框值)/>

单行文本输入框：type=“text”

name：属性名可以重复（自定义），向服务器端发送数据的键

value：向服务器端提交的值

placeholder=""：输入框内提示信息

readonly=“readonly”：只读

disabled=“disabled”：禁用组件，一旦组件被禁用了，值就不会向服务器端提交

checked=“checked”：默认选中

注意：单选框通过name属性来分组，name相同是一组才可实现单选。单选和复选不能输入内容，所以必须指定的值

文件选择框语法<input type=“file”(文件选择框) name=“img”(文件选择框名)/> accept=“.文件后缀名,.文件后缀名… “ 限制文件类型

表单下拉框

(下拉框)

​ 选择省份</ option >(选项)

​ < option value=“100”>山西</ option >

​ < option value=“101” selected = "selected " (默认值)>陕西</ option >

​ < option value=“102”>河南</ option >

默认选项：selected=“selected”

value：向服务器端提交的值

注：下拉框的name,id,事件等需要在select中定义，而value需要在option中定义

表单多行文本域

多行文本域基本语法

文本域中的内容(6行40个字符宽度的多行文本域)

表单按钮

<input type=“reset”(按钮类型)name=“Reset”(按钮名称) value=" 重填 "(按钮上显示的名称)>

​ 重置表单内容

​ 提交表单内容到服务器

​ 普通按钮没有功能，只能被点击触发事件用

内联框架

内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面

target=“name”(name可为任何窗口的名字)：在指定名称的窗口打开

target="_parent"：在父级窗口打开新页面

ut type=“button” value=“按钮”> 普通按钮没有功能，只能被点击触发事件用

内联框架

内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面

target=“name”(name可为任何窗口的名字)：在指定名称的窗口打开

target="_parent"：在父级窗口打开新页面

target="_top"：在顶级窗口打开新页面