1:网页基本结构
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
2:想要页面换行:
(1)使用<br/>
body>
天气列表:<br/>
一月:
</body>
*注:<br/>没有开标签和闭标签,任何标签都可以用在标签背后加斜线的方式自己结束自己。*
(2)使用<p></p> 标签
<body>
天气列表:
<p> 一月:</p>
</body>
注:使用`<p></p>` 标签两行文字会空一行,更适用于段落换行。
3:标题:<h1></h1>标签
<body>
天气列表:
<h1> 一月:</h1>
<h1> 二月:</h1>
在网页中加了<h1></h1>的字就会有不一样的字体。
还有<h2></h2>、<h3></h3>等等。每个字体都不一样。
4:网页分格:<hr/>
出现和网页内容一样宽的水平分割线。
<body>
天气列表:
<h1> 一月:</h1>
<hr/>
<h1> 二月:</h1>
</body>
5:添加注释:<!--文字-->
注:网页上不会出现
6:转义字符:
(1)在网页中插入多个空格:
插入: ;(一个空格插入一个 )
(2)在网页中输入<符号
插入:<
(3) 在网页中输入&符号
插入:&
7:插入图片:<img src="yiyue.jpg" alt="一月的图片">
src是图片的路径,alt是图片的替代性文字。
控制图片宽度和高度:
<img src="yiyue.jpg" alt="一月的图片" width="300px" height="200px">
8:图片的超链接:
(1)新建一个页面,保存为html模式yiyue.html,创建html结构,再在<body></body>中间放好图片
<body>
<img src="yiyue.jpg" alt="一月的图片">
</body>
(2)在主页面中加上<a href="yiyue.html" >一月</a>
<body>
天气列表:
<h1> <a href="yiyue.html">一月:</a></h1>
<hr/>
<h1> 二月:</h1>
</body>
注:<a></a>即为设置超链接的标签;
href属性:需要链接的网页路径;
target属性:设置在什么地方打开页面,默认为target="_self",新建一个为target="_blank"
9:div与span:
<div></div>大多用来组织网页结构,在
<span></span>也可以用来组织网页结构,不会单独显示在一行
网页一般结构:
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
<span>项目1</span>
<span>项目2</span>
<span>项目3</span>
</body>
10:列表:
无序列表:<ul></ul>项目前有一个圆点。
<body>
<ul>
<li>迷糊</li>
<li>蛋黄</li>
<li>果汁</li>
</ul>
</body>
注:type有三种取值
(1)`<ul type="disc"></ul>` disc为默认取值。项目前有一个圆点。
(2)`<ul type="ciecle"></ul>` ciecle 项目前有一个圆圈。
(3)`<ul type="square"></ul>` square项目前有一个方形实心点。
有序列表:<ol></ol>默认项目前为数字123。
<body>
<ol>
<li>迷糊</li>
<li>蛋黄</li>
<li>果汁</li>
</ol>
</body>
注:type有五种取值
(1)“1” (2)“a” (3)“A” (4)“i” (5)“I”
**11:表格:<table border="1"></table>**
<tr></tr>为一行,
<td></td>为一行里面的单元格
<body>
<table border="1">
<tr>
<td>季节</td>
<td>月份</td>
</tr>
<tr>
<td>春天</td>
<td>三月到五月</td>
</tr>
<tr>
<td>夏天</td>
<td>六月到八月</td>
</tr>
<tr>
<td>秋天</td>
<td>九月到十一月</td>
</tr>
<tr>
<td>冬天</td>
<td>十二月到二月</td>
</tr>
</table>
</body>
表格标题使用,和的用法是一样的,标题的文字自动加粗且水平居中对齐。
属性:
border=“1” 单元格边框的宽度
width=“500” 表格的宽度
height=“300” 表格的高度
cellspacing=“2” 单元格与单元格的距离
cellpadding=“2” 内容距边框的距离
bgcolor=“red” 背景颜色
bordercolor 设置边框颜色
colspan可以合并同行的单元格,后面指定合并的单元格数目。
align=“left|right|center” 内容的的位置,也可以用于表格,
如果直接给表格用align=“center”,表格居中,
如果给tr或者td使用,tr或者td内容居中。
内容垂直对齐方式:
valign设置内容的垂直对齐方式,默认是居中(middle),也可是顶部垂直(top)和底部垂直(bottom)。
<td valign="bottom">周巡</td>
12:表单<form></form>
作用:主要负责数据的采集功能。
表单的组成:提示信息:表单控件:表单域:
<form>
<input type="text"> (文本框)
<input type="password"> (密码框)
<input type="checkbox">婚否 (选择框)
<input type="radio" name="mast">男 前提:name同
<input type="radio" name="mast">女 (二选一)
<input type="button" value="确定"> (按钮)
<textarea name="" id="" cols="30" rows="10"></textarea>(多行文本)
<select name="" id="">
<option value="1">婴儿</option>
<option value="2">儿童</option>
<option value="3">成人</option>
</select> (下拉选择框)
<input type="submit" value="提交"> (确定)
<input type="reset" value="取消"> (取消)
</form>
表单属性:
action:用来指定表单处理程序的位置,也就是将收集
到数据发送的位置(服务器端脚本处理程序)
name:定义表单的名字
method:定义表单将数据传送到服务器的方式,默认
是get,但是get安全性差,建议使用post,安
全性更高。
文本/密码输入框属性:
maxlength:指定输入的字符最大长度
readonly=“readonly”:将输入框设置为只读的状态
disable=“disable”:输入框设置为未激活状态
name=“username”:输入框的名称
value=“frank”:将输入框的内容传给处理的脚本,后面如果指定内容则为默认内容。
下拉列表属性:
multiple=“multiple”:将下拉列表设置为多选项
selected=“selected”:设置为默认的选中项
使用optgroup标签可以对下拉列表进行分组:label指定了组名,不能被选定:
e,g:
居住地:<select>
<optgroup label="上海市">
<option>长宁区</option>
<option>静安区</option>
<option>浦东新区</option>
<option>奉贤区</option>
<option>杨浦区</option>
<option>普陀区</option>
<option selected="selected">松江区</option>
</optgroup>
<optgroup label="安徽省">
<option>合肥市</option>
<option>芜湖市</option>
<option>马鞍山市</option>
<option>安庆市</option>
<option>宿州市</option>
<option>阜阳市</option>
</optgroup>
</select>
按钮:
普通按钮:不能实现信息的提交,必须要配合JS的使用。
提交按钮:可以实现信息的提交功能。
图片按钮:能够实现数据的提交。
重置按钮:重置输入的内容
13:css选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<title>css选择器</title>
<style>
h1{ (第一种标签选择器)
color: blue;
}
.x1{ (第二种类选择器)
color: chartreuse;
}
.x2{
color: cornsilk;
}
#title{ (第三种id选择器)
color: darkmagenta;
font-size: 12pt;(设置字体大小)
}
</head>
<body>
<span id="title">天气列表:</span>
<h1> 一月:</h1>
<h2>晴天</h2>
<hr/>
<h1> 二月:</h1>
<h2>阴天</h2>
</body>
</html>
13:css盒子模型:
由四层组成:由内而外分别为:
(1)元素的真实内容autoxauto
(2)内边距padding
(3)元素的边框border 复合属性(宽度,颜色,线的类型)
(4)外边距margin
solid实线,dotted虚线,
border-radius:圆角比平的半径
background-color: darkmagenta;设置背景颜色
注:背景颜色覆盖了内边距,不覆盖外边距。
<!DOCTYPE html>
<html lang="en">
<head>
<title>css盒子模型</title>
<style>
#show-padding{
padding:10px;
background-color: darkmagenta;(设置背景颜色)
}
#show-margin{
margin:10px;
}
#show-border{
border:1px black solid;
border-radius: 5px;
}
#show-all{
padding:10px;
margin:10px;
border:1px black solid;
}
</style>
</head>
<body>
<span>天气列表:</span>
<span id="show-padding">天气列表:</span>
<span id="show-margin">天气列表:</span>
<span id="show-border">天气列表:</span>
<span id="show-all">天气列表:</span>
</body>
</html>
改变padding的不同:
#show-padding{
padding-left:10px;
padding-right:5px;
padding-top:7px;
padding-bottom:4px;
}

被折叠的 条评论
为什么被折叠?



