--------接上篇 -------
**
1.HTML中的图片标记
<img>**—可以在网页中显示出图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片标记</title>
</head>
<body>
<h1>html中通过img标记显示图片</h1>
<h2>html的标记中可以出现属性</h2>
<h2>标记的属性就是给这个标记提供附加信息</h2>
<h2>标记的属性在标记的开始标记中出现</h2>
<h2>标记的属性在标记中可以出现多个，多个属性使用空格分隔</h2>
<h2>标记的属性是由"属性名称 = 属性值"</h2>
<h2>img的属性</h2>
<h2>src----图片路径</h2>
<h2>width----设置图片宽度</h2>
<h2>height----设置图片高度</h2>
<img src="F:\20201015\HTML\20201016HTML(2)\code\imgs\avatar2.png"
width="400px" height="200px"/>
<h2>图片路径有三种形式</h2>
<h2>1、绝对路径:从操作系统的盘下开始查找资源的路径就是绝对路径</h2>
<h2>例如:F:\20201015\HTML\20201016HTML(2)\code\imgs\avatar2.png</h2>
<h2>缺点:当我们把html文件移动到没有指定盘符的计算机上时，那么这个路径就无法找到指定资源</h2>
<h2>2.相对路径:以本html文件为中心开始查找资源的路径就是相对路径</h2>
<h2>例如:imgs\avatar2.png</h2>
<img src="imgs\avatar2.png"/>
<h2>3.网络地址:使用网络的url表示图片</h2>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602821790591&di=a9c9143d6f8ca949b7b71f4a3f2e78da&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201603%2F06%2F20160306204517_i4Se8.jpeg"
width="400px" height="200px">
</body>
</html>
**
2.HTML的背景设置
**—指的是body标记的背景设置
背景色代码🔗
https://m.wang1314.com/doc/webapp/topic/21084865.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body的背景设置</title>
</head>
<body background="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=167741595,2706197548&fm=26&gp=0.jpg">
<h1>body的背景设置</h1>
<h2>body的背景设置是通过为body标记设置属性来完成背景设置</h2>
<h2>bgcolor--设置背景色【可以是颜色单词，也可以是颜色码】</h2>
<h2>bgcolor="chartreuse"</h2>
<h2>bgcolor="CC00CC"</h2>
<h2>background--设置背图片【图片路径】</h2>
<h2>background="imgs/banner1.png"</h2>
</body>
</html>
**
3.HTML的链接–超链接
****【可以帮助我们打开其他的html文件/资源】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<a name="top"></a>
<h1>通过a标记【超链接】---可以帮助我们打开其他的html文件/资源</h1>
<h2>属性href----设置被访问的资源的路径</h2>
<h2>资源的路径--绝对路径/相对路径/网络地址</h2>
<a href="F:\20201015\HTML\20201016HTML(2)\code\tupian.html">打开tupian.html</a><br>
<a href="tupian.html">打开tupian.html</a><br>
<a href="http://news.baidu.com/">新闻</a>
<h2>属性target----设置被访问的资源打开方式</h2>
<h2>_blank----在新窗口中显示资源</h2>
<h2>_self----在当前窗口中显示资源</h2>
<a href="tupian.html" target="_self">打开tupian.html</a><br>
<h2>属性name----设置链接名称</h2>
<h2>链接到当前页面中的位置</h2>
<h2>第一段</h2>
<p>
北凉王府龙盘虎踞于清凉山，千门万户，极土木之盛。作为王朝硕果仅存的异姓王，在庙堂和江湖都是毁誉参半的北凉王徐骁作为一名功勋武臣，可谓得到了皇帝宝座以外所有的东西，在西北三州，他就是当之无愧的主宰，只手遮天，翻云覆雨。
</p>
<h2>第二段</h2>
<p>
难怪朝廷中与这位异姓王政见不合的大人们私下都会文绉绉骂一声徐蛮子，而一些居心叵测的，更诛心地丢了顶“二皇帝”的帽子。
</p>
<h2>第三段</h2>
<p>
今天王府很热闹，位高权重的北凉王亲自开了中门，摆开辉煌仪仗，迎接一位仙风道骨的老者，府中下人们只听说是来自道教圣地龙虎山的神仙，相中了痴痴傻傻的小王爷，要收作闭关弟子，这可是天大的福缘，北凉王府都解释成傻人有傻福。
</p>
<h2>第四章 小二上酒</h2>
<p>
可不是，小王爷自打出生起便没哭过，读书识字一窍不通，六岁才会说话，名字倒是威武气派，徐龙象，传闻还是龙虎山的老神仙当年给取的，说好十二年后再来收徒，这不就如约而至了。
</p>
<h2>第五段</h2>
<p>
王府内一处院落，龙虎山师祖一级的道门老祖宗捻着一缕雪白胡须，眉头紧皱，背负一柄不常见的小钟馗式桃木剑，配合他的相貌，确实当得出尘二字，谁看都要由衷赞一声世外高人呐。但此番收徒显然遇到了不小的阻碍，倒不是王府方面有异议，而是他的未来徒弟犟脾气上来了，蹲在一株梨树下，用屁股对付他这个天下道统中论地位能排前三甲的便宜师傅，至于武功嘛，咳咳，前三十总该有的吧。
</p>
<a href="#top">回到顶部</a>
</body>
</html>
**
4.HTML中的列表
**
Html中的列表有3大类【有序列表/无序列表/自定义列表】
**
5.HTML中的表格
**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<h1>通过table标记表示表格</h1>
<h2>table标记表示表格,tr表示表格中的每一行，td表示表格中的每一列</h2>
<h2>border----表格的边框</h2>
<h2>width----表格的宽度</h2>
<h2>height----表格的高度</h2>
<h2>align-----表格的水平对齐方式【left,center,right】</h2>
<h2>align--设置到tr表示当前行中的每一列数据的水平对齐方式</h2>
<h2>valign--设置到tr表示当前行中的每一列数据的垂直对齐方式【top，middle,bottom】</h2>
<h2>bgcolor--设置设置表格【行/列】的背景色</h2>
<h2>background--设置设置表格【行/列】的背景图片</h2>
<h2>cellspacing---设置单元格之间的间距</h2>
<h2>cellpadding---设置单元格中的内容与边框之间的间距</h2>
<table border="1px" width="400px" height="100px" align="left"
background="imgs/timg.jpg" cellspacing="0px" cellpadding="20px">
<tr align="center" valign="bottom" bgcolor="antiquewhite">
<td>zhangsan</td>
<td>23</td>
<td>男</td>
<td>西安</td>
</tr>
<tr>
<td>lisi</td>
<td>24</td>
<td>女</td>
<td>西安</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格的合并</title>
</head>
<body>
<h1>表格的合并有2种形式跨行/跨列</h1>
<table border="1px" width="400px" height="100px" >
<tr>
<td>zhangsan</td>
<td>23</td>
<td>男</td>
<td>西安</td>
</tr>
<tr>
<td>lisi</td>
<td>24</td>
<td>女</td>
<td>西安</td>
</tr>
</table>
<h2>跨列--需要为单元格td设置colspan属性</h1>
<table border="1px" width="400px" height="100px" >
<tr>
<td colspan="4">学生信息表</td>
</tr>
<tr>
<td>zhangsan</td>
<td>23</td>
<td>男</td>
<td>西安</td>
</tr>
<tr>
<td>lisi</td>
<td>24</td>
<td>女</td>
<td>西安</td>
</tr>
</table>
<h2>跨行--需要为单元格td设置colspan属性</h1>
<table border="1px" width="400px" height="100px" >
<tr>
<td rowspan="2">学生信息表</td>
<td>zhangsan</td>
<td>23</td>
<td>男</td>
<td>西安</td>
</tr>
<tr>
<td>lisi</td>
<td>24</td>
<td>女</td>
<td>西安</td>
</tr>
</table>
</body>
</html>
**
6.HTML表单
**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<h1>通过form标记表示一个表单</h1>
<h2>表单向后台处理程序提交输入数据用的【登陆/注册....】</h2>
<h2>属性action---设置表单数据的后台处理程序的路径</h2>
<h2>属性method---设置表单数据的提交方式【get[默认]/post】</h2>
<h1>表单元素</h1>
<form action="" method="get">
<table border="1px">
<tr>
<td colspan="3">input标记---输入类型的元素</td>
</tr>
<tr>
<td>文本框</td>
<td><input name="username" type="text"/></td>
<td>
type:input标记的类型text<br>
name:为input所设置的名称
</td>
</tr>
<tr>
<td>密码框</td>
<td><input name="password" type="password"/></td>
<td>
type:input标记的类型password<br>
name:为input所设置的名称
</td>
</tr>
<tr>
<td>单选按钮</td>
<td>
<input name="sex" type="radio" checked="checked" value="nan"/>男
<input name="sex" type="radio" value="nv"/>女
</td>
<td>
type:input标记的类型radio<br>
name:为input所设置的名称<br>
name属性值要相同，才能被当成一组<br>
选中其中的一个<br>
checked="checked"默认被选中<br>
value:被提交到后台处理程序的数据值
</td>
</tr>
<tr>
<td>复选框</td>
<td>
<input name="group" type="checkbox" checked="checked" value="kanshu"/>看书
<input name="group" type="checkbox" value="tiaowu"/>跳舞
<input name="group" type="checkbox" value="game"/>打游戏
</td>
<td>
type:input标记的类型checkbox<br>
name:为input所设置的名称<br>
name属性值要相同，才能被当成一组<br>
选中其中的多个<br>
checked="checked"默认被选中<br>
value:被提交到后台处理程序的数据值
</td>
</tr>
<tr>
<td>日历</td>
<td>
<input name="rili" type="date"/>
</td>
<td>
type:input标记的类型date<br>
name:为input所设置的名称<br>
</td>
</tr>
<tr>
<td>颜色框</td>
<td>
<input name="color" type="color"/>
</td>
<td>
type:input标记的类型color<br>
name:为input所设置的名称<br>
</td>
</tr>
<tr>
<td>文件输入框</td>
<td>
<input name="myfile" type="file"/>
</td>
<td>
type:input标记的类型file<br>
name:为input所设置的名称<br>
</td>
</tr>
<tr>
<td>隐藏域</td>
<td>
<input name="hidden" type="hidden" value="html/css"/>
</td>
<td>
type:input标记的类型hidden<br>
value:被提交到后台处理程序的数据值<br>
</td>
</tr>
<tr>
<td colspan="3">input标记---按钮类型的元素</td>
</tr>
<tr>
<td>普通按钮</td>
<td>
<input type="button" value="普通按钮"/>
</td>
<td>
type:input标记的类型button<br>
value:按钮上显示的文字<br>
</td>
</tr>
<tr>
<td>表单提交按钮</td>
<td>
<input type="submit" value="表单提交按钮"/>
</td>
<td>
type:input标记的类型submit<br>
value:按钮上显示的文字<br>
</td>
</tr>
<tr>
<td>表单重置按钮</td>
<td>
<input type="reset" value="表单重置按钮"/>
</td>
<td>
type:input标记的类型reset<br>
value:按钮上显示的文字<br>
</td>
</tr>
<tr>
<td colspan="3">下拉列表</td>
</tr>
<tr>
<td>下拉列表</td>
<td>
<select name="sheng">
<option value="shanx">陕西省</option>
<option value="hb">湖北省</option>
<option value="ah">安徽省</option>
<option value="xj">新疆</option>
</select>
<select name="shi">
<option value="xa">西安市</option>
<option value="bj">宝鸡市</option>
<option value="tc">铜川市</option>
<option value="wn">渭南市</option>
</select>
</td>
<td>
select:下拉列表<br>
option:下拉列表中的每一个选择项<br>
option--value:被提交到后台处理程序的数据值<br>
</td>
</tr>
<tr>
<td colspan="3">文本域---【大型的文本框】</td>
</tr>
<tr>
<td>文本域</td>
<td>
<textarea cols="40" rows="10"></textarea>
</td>
<td>
textarea:文本域<br>
cols:设置宽度<br>
rows:设置高度
</td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
