html

来源：互联网发布：吴亦凡扒皮知乎编辑：程序博客网时间：2024/06/06 16:55

html用来写网站界面(UI)

标签有属性 <html>,<a>,<body>,<head>

<div>my first website</div> div为块级元素，占据整行长度，换行

<span>my first website</span> span为内连元素，只占据元素内容长度，不换行

注释<!－－－－>

内连元素：<body>

块级元素：<p> <h1>

换行<br> 空格：  <hr>水平线

无序列表需要嵌套写法：有序列表:

</ul> </ol>

<h1>最好用一个 <h2>可以用几个

子元素，父元素，兄弟元素，后代元素

定义列表

<dl>

<dd> 苹果的定义</dd>

<dd> 橙子的定义</dd>

</dl>

2.插入图片

相对路径：相当于我们当前html文件的相对位置

<img src=“./1.jpg” /> 同一目录下

alt 里写图片说明 width填写图片长度，也可用百分比表示（相对于父元素） height高度

内连元素

3.超链接

<a href=“http://www.baidu.com” title=“ “ target=“ _blank”> baidu </a>

内连元素

title的内容会在鼠标悬浮时显示

target: 设置为_blank时即可在新窗口打开链接地址

4.制定图片某块区域加超链接

使用map标签可以给图片某块区域加超链接

－为map标签首先加上id 属性用来为map标签定义一个唯一的名称

－为了保证兼容性再加上name属性，属性值与id的值相同

－为map标签所作用的图片加上usemap属性，属性值为＃id名称

－再在map标签内嵌套area标签来实现给制定区域加链接

shape属性：定义链接区域的形状，常用值rect,circle

coords属性：确定区域的精确位置，填写坐标即可

href属性：填写链接地址

alt属性：给链接加一些说明信息

这是点击整张图片跳转

</map>

if shape=“circle” coords=“圆心507,287,半径20“

5. div标签：一个存放标签的容器

<div> 块级元素

6.span标签：来组合内连元素，以便通过css来美化它们

7.表格：

表格由table标签创建,tr标签来创建表格的行，td标签或者th标签创建表格的列
<table>
<tr><th>姓名</th><th>语文</th><th>数学</th></tr>
<tr><td>小孙</td><td>70</td><td>90</td></tr>
<tr><td>小小</td><td>60</td><td>80</td></tr>
</table>
table标签
-属性：border，规定表格边框的宽度
-属性：cellpadding
-属性：cellspacing
tr标签：定义表格中的行，tr元素包含一个或多个th或td元素
th标签：定义表格内的表头单元格
td标签：定义表格内的普通单元格

8.表单：让用户填写某些内容，完成后可以提交到服务器端进行处理保存

－标签<form>定义供用户输入的html表单：

－属性：action: 规定当提交表单时，向何处发送表单数据

name:给表单命名

target:_blank等其他值，这是最常用的

method:提交方式，post或get值

－<input>标签定义表单的输入界面

通过type属性来展示不同的输入界面，通过value改变默认值

－普通文本框： <input type=“text” value=“ “ />

－密码框：<input type=“password” disabled=“disabled” />

－文件上传：<input type=“file” />

－隐藏的input: <input type=“hidden” />

－普通按钮：<input type=“button” />

－单选：<input type=“radio” />

通过相同的name属性来实现单选

性别：<input type=“radio” name=“sex” checked=“checked” />男 <input type=“radio”name=“sex” />女

－复选框： <input type=“checkbox” />

－提交： <input type=“submit” />

－重置：<input type=“reset” />

－属性checked,可用值：checked，一般用于选择输入界面（单选复选），实现默认选择

－属性disabled，可用值：disabled,几乎所有的输入界面都可以使用该属性

－属性name,自己给input 输入界面起的名字

－属性readonly,可用值readonly,使输入界面为只读状态

－属性size,值为数字，设置输入框长度

－属性value,该属性值就是这个input最终提交到页面的数据，可以通过该属性设置默认值

－textarea标签，定义多行输入框

双标签，默认值直接写在标签之间 <textarea>默认值</textarea>

属性：cols,值为数字，长度

属性：rows,值为数字，高度

也可以使用上面所说的：disabled,name,readonly属性

－label标签，提升用户体验,按男也可以选择

标签的 for属性与相关input的id属性相同

－select标签，配合option标签来实现下拉菜单，可用属性：disabled,name,multiple

－option标签：可用属性：disabled,selected,value

</optgroup>

</select>

－optgroup标签：把相关的选项组合在一起,给选项分组

属性label:给选项组命名

属性disabled:经用该选项组

9.标签写法及嵌套:

具有boolean值得属性：例如disabled,readonly,checked
只写属性而不写属性值时，当作true
不写属性表示false

属性值的引号可以省略：属性值不包含空字符串，<,>,=,',"

1.块级元素可以嵌套内联元素，但是内联元素不能办函块元素
<div> <span> 我是我 </span> </div>

2).内联元素可以嵌套内联元素
<a href ="#"> <span> </span> </a>

3).块级元素与块级元素嵌套

4).块级元素不能放在p标签里面

<p> <ol> <li> </li> </ol> </p> ------错

5).li内可以包含div标签
li和div都是装载内容的容器，地位平等，没有级别之分
1）div块级元素是一个容器，可以存放任何常用标签，包括自己。
用div将页面划分为不同的块

块级元素和内联元素间是可以相互转化的。

10.<head>内的元素在浏览器中不显示，除了标题
<head>里可放<base>,<link>,<meta>,<title>,<style>以及<script>
[1]为html页面添加描述信息用于搜索引擎抓取
使用name属性，配合content属性来实现
<meta name="keywords" content="关键词">
<meta name="description" content="页面描述">

[2]引入css文件

<link rel="stylesheet" href="文件位置" type="text/css">

[3]为html文档加上使用的语言类型说明
<html lang="zh-CN>
</html>

英文使用en

[4]实现网页跳转
<meta http-equiv="refresh" content="等待秒数;url-地址“〉

[5]告诉浏览器不要加载页面的缓存（即获取网站的最新内容）
<meta http-equi="pragma" content="no-cache">

11.iframe标签，框架,写在body里，双标签
创建办含另外一个文档的内联框架（即行内框架）
属性：frameborder 值：1，0
作用：规定是否显示框架周围的边框
width 定义iframe的宽度
height 定义高度
name 给iframe命名
scrolling 值：yes,no,auto规定是否在iframe中显示滚动条
src 规定在iframe中显示的文档的URL

0 0