HTML
C/S和B/S架构
- C/S:客户端服务器模式
- B/S:浏览器服务器模式
HTML简介
-
说明:HTML是一种超文本标记语言(hyper text markup language)
-
后缀名:.html或者是.htm,目前统一使用.html
-
标签:html网页的基本组成部分
-
格式
<标签名 属性1="值一" 属性2="值2" ...>标签内容</标签名><标签名 属性1="值1" 属性2="值2".../> -
特点:
- 双边标签必须成对出现,单边标签自己需要加上’/’
- 标签的容错性很强,有时即使写错了,依旧可以执行
- 所有标签都是已经定义好的
- 变签名不区分大小写,但一般建议使用小写
-
全局架构标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题内容放置处</title>
</head>
<body>
网页要显示的内容编辑处
</body>
</html>
-
标签说明
标签 说明 html 文档中最大的标签,所有内容都放在这里面 head 头部标签,通常放置显示之外的内容,用于对页面的额外说明 body 存放页面显示的内容 meta 设置字符集 title 设置标题
文本修饰标签
-
标题 :
<h1>--<h6>,字体从大到小 -
加粗:
<b></b> <strong></strong> -
斜体:
<i></i> <em></em> <cite></cite> -
下划线:
<u></u>自带下划线的标签有------
<u></u>和<a href="" /> -
删除线:
<s></s> -
标注: 上标注–
<sup></sup>下标注----<sub></sub> -
字体:
<font size="" color="" face=""></font>其中size代表字体大小 ,color代表字体颜色 ,face代表使用的字体类型
格式控制标签
-
换行:
<br />有多少个空格,就显示多少个 -
滚动标签:
<marquee></marquee>注意:写在该标签里面的内容会在屏幕上来回滚动,类似于弹幕
-
段落标签:
<p></p>一个块级标签 -
原样输出标签:
<pre></pre>浏览器上显示的内容与文档内容一致 -
列表
- 有序列表:
<ol><li></li></ol> - 无序列表:
<ul><li></li></ul> - 可通过设置type属性该表小图标,无序列表改变的是图标的形状,如square(实心方块),circle(空心圆),disc(实心圆,默认);有序列表改变的是标签的序号,是用什么来表示,阿拉伯数字或罗马数字亦或者其他
- 有序列表:
字符实体(转义字符)
-
说明:在HTML中,有些字符是预留的.比如在HTML中不能使用小于号(<)和大于号(>)
因为浏览器会误认为是标签,此时我们可以使用字符实体,正确的显示预留字符
-
常见的字符实体
空格 < 小于号 > 大于号 & & -
实例:
<ol> <li>HTML中,换行使用的标签是( ) 。</li> <ol type="A"> <li><br /></li> <li><p></li> <li><hr /></li> <li><img /></li> </ol> </ol> /* 使用字符实体实现下面的输出 */ 1.HTML中,换行使用的标签是( ) 。 A.<br /> B.<p> C.<hr /> D.<img />
url(统一资源定位符)
- 是(URI—统一资源标识符)的一种,可以定位一个网络资源
- 组成:
协议://主机:端口/文件?参数1=值1&参数2=值2 - 示例:
<https://www.baidu.com/s?ie=utf-8&f=8>
超链接(<a></a>)
-
说明:进行页面的跳转
-
属性
属性 说明 href 指定跳转的位置 title 光标放上去会显示提示信息 target 页面打开的方式,属性值有 _self,_blank,_top,_parent -
target常用的属性值说明
_self-----在当前页面打开_blank------在新的页面打开
-
锚点:对页面进行定位的
- 命名语法:
<a name="label"锚(显示在页面上的文本)</a> - 提示: 锚点的名字可以任意,也可以使用id属性来替代name属性,命名锚同样有效
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> :target{ border: 2px solid #E31106; } a[href]:hover{ font-weight: bold; color: red; font-style: italic; } #mao1,#mao2{ color: #0000FF; } </style> </head> <body> <h2>标题在此</h2> <p><a href="#mao1">跳转到内容1</a></p> <p><a href="#mao2">跳转到内容2</a></p> <p><h3>请点击上面的链接,:target选择器会突出显示当前活动的HTML锚</h3></p> <p id="mao1"><b>内容1</b></p> <p id="mao2"><b>内容2</b></p> <p><b>注释:</b>IE8以及更早版本不支持:target选择器</p> </body> </html> - 命名语法:
多媒体标签()
图片标签(img)
-
组成:
<img src="" title="" width="" height="" />属性 说明 src 指定资源的地址 title 光标放上去显示的提示信息,资源连接失败的时候,会显示信息 width 设置图片宽度 height 设置图片高度
音频标签(audio)
-
组成:
<audio src="" controls="" loop="" autoplay=""></audio>属性 说明 src 指定资源路径 controls 是否显示播放条 loop 是否进行循环播放 autoplay 设置自动播放
音频标签(video)
-
组成:
<video src="" controls="" loop="" autoplay=""></video>属性 说明 src 指定资源路径 controls 是否显示播放条 loop 是否进行循环播放 autoplay 设置自动播放
表格(table)
-
组成:
<table><tr><td></td></tr></table>属性 说明 weight 宽度 height 高度 align 对齐方式 bgcolor 背景色 border 边框 bordercolor 边框颜色 -
<tr></tr>中的属性属性 说明 bgcolor 背景色 align 水平对齐方式(left)默认 (center) (right) valign 垂直对齐方式(top) middle(默认) (bottom) -
**
<td></td>**中的属性属性 说明 bgcolor 背景色 align 水平对齐方式 valign 垂直对齐方式 rowspan 行合并 colspan 列合并 -
<th></th>------用于显示表头信息 -
<caption></caption>-------表格标题,说明表格的作用
分帧(frameset)
-
说明:替代了body定义页面的框架,可以指定尺寸,也可以指定比例(不能和body连用)
属性 说明 noresize 禁止拖拽 frameborder 是否显示边框,0表示隐藏,1表示显示 border 设置边框的宽度 bordercolor 设置边框的颜色 rows 垂直方向进行划分尺寸,可使用像素,也可使用百分比 cols 水平方向进行尺寸划分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 添加noresize之后,禁止页面拖动 --> <frameset rows="20%,*,30%"> <frame src="http://www.baidu.com"/> <frameset cols="50%,*"noresize> <frame src="http://www.sohu.com" /> <frame src="http://www.qq.com" /> </frameset> <frame src="http://www.weibo.com"/> </frameset> </html>
表单(form)
-
说明:服务器在搜索用户信息的时候会使用表单,如登录,注册等
-
组成:
<form method="" action=""></form>属性 说明 method 提交的方法,默认为get,使用post进行提交的数据是不可见的 action 提交的地址 <form method="post" enctype="multipart/form-data" action=""> 用户名:<input name="username" type="text"/><br /> 密码:<input name="password" type="password" /><br /> <input type="submit" value="提交" /> </form>input组成表单的重要部分属性 说明 type 类型 name 名称,必须写,不写的话,提交的数据是无意义的数据 size 设置尺寸 maxlength 允许输入的最大字符数 value 文本框中的内容 placeholder 设置占位的提示信息 readonly 只读 disabled 禁用状态 type属性
取值 说明 text 普通文本 password 密文文本 submit 提交按钮 hidden 隐藏字段,便于携带隐藏信息 radio 单选框,name属性要一致,提交时通过value指定,checked默认选中 checkbox 复选框(多选框),同上 number 数值类型的文本框,可进行加减操作,也可通过min和max限制范围 file 用于上传文件 image 图片形式的提交按钮 <body> <form method="post" enctype="multipart/form-data" action=""> 用户:<input name="username" placeholder="请输入您的姓名.." maxlength="10" type="text" /><br /> 密码:<input name="password" type="password" placeholder="请输入密码.." maxlength="8"/><br /> <input type="submit" value="登录按钮" /> <br /><br /> 性别:<input type="radio" name="sex" value="0" id="nan" checked="checked"/><label for="nan">男</label> <input type="radio" name="sex" value="1" id="nv" checked="checked"/><label for="nv">女</label><br /> <br /><br /> 爱好:<input type="checkbox" name="hobby" value="music" checked="checked"/>听音乐 <input type="checkbox" name="hobby" value="reading" />阅读<br /> <input type="checkbox" name="hobby" value="coding" />敲代码 <input type="image" src="https://www.baidu.com/img/bd_logo1.png"/> <br /><br /> </form> </body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
