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>
<li> </li> <li></li>
<li> </li> <li></li>
</ul> </ol>
<h1>最好用一个 <h2>可以用几个
子元素,父元素,兄弟元素,后代元素
定义列表
<dl>
<dt> 苹果 </dt>
<dd> 苹果的定义</dd>
<dt> 橙子</dt>
<dd> 橙子的定义</dd>
</dl>
2.插入图片
<img src=“ “ alt=“ “ width=“ “ height=“ ”>
相对路径:相当于我们当前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标签来实现给制定区域加链接
<area shape=“ “ coords=“ “ href= “ “ alt=“ “>
shape属性:定义链接区域的形状,常用值rect,circle
coords属性:确定区域的精确位置,填写坐标即可
href属性:填写链接地址
alt属性:给链接加一些说明信息
<a href=“http://www.baidu.com”> <img src=“images/1.jpg” /> </a>
这是点击整张图片跳转
<img src=“images/1.jpg” usemap=“#img1” />
<map id=“img1” name=“img1”>
<area shape=“rect” coords=“184,33,391,258” href=“http://www.baidu.com” alt=“百度下“ target=“ _blank”>
</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属性相同
<input type=“radio” id=“boy” /> <lablel for=“boy”>男</label>
-select标签,配合option标签来实现下拉菜单,可用属性:disabled,name,multiple
-option标签:可用属性:disabled,selected,value
<select multiple=“multiple”>
<optgroup label=“ “>
<option selected=“selected”>无锡</option>
<option>上海</option>
</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