标签:自动识别 font tor nbsp 使用 收录 主题 编码方式 text
HTML:HyperText Markup Language 超文本标记语言 a 普通文本 <a></a>超文本标记 具有自己的功能 语言:有语法结构 |
1.以.html或.htm为后缀 2.由浏览解析执行 3.用带有尖括号的"标记"来标识 4.可以在网页中执行js脚本 |
(1)标签的分类 1.双标记(封闭类型) <关键字></关键字> 双标记必须成对出现,有开始就有结束 <p></p> 2.单标记(非封闭类型) <关键字>或者<关键字/> |
(2)标签的嵌套 1.什么是嵌套 一对标记中出现另一个(对)标记,形成了层级。 <div> <p></p> </div> 2.语法 <关键字1> <关键字2> <关键字3></关键字3> </关键字2> </关键字1> |
(3).属性和值 允许通过属性和值对标记进行修饰 属性用来设置标签中的内容如何显示 属性不能瞎写,应该根据文档中的规定来编写, 有些属性有属性值,有些没有。如果有属性值,属性值应该使用引号引起来 语法: 1.属性和值必须声明在开始标记中 <关键字 属性="值"></关键字> 2.多个属性之间用空格分开 <关键字 属性1="值1" 属性2="值2" ...></关键字> |
3.标准属性(通用属性) 所有的元素都支持的属性 id 定义此元素在页面中的唯一标识 title 鼠标悬停在元素上时,显示的文本 style css中,定义行内样式 class css 中,引用类选择器 |
(4)注释 语法:<!--注释内容--> 注意:注释不能嵌套注释,注释也不能出现在标记中 |
1.文档类型的声明 <!DOCTYPE html>告诉浏览器,我这篇html使用h5的规则解析 |
2.网页的结构 <!doctype html> <html> <head></head> <body></body> </html> <html></html>表示网页的开头和结束 在html中包含两个标签 <head></head> 网页的头部,定义全局的信息 <body></body> 网页的主题,展示的内容 |
3.head元素是其他头元素的容器<head></head> <title></title> 网页的标题并且title标签的内容会作为搜索结果的超链接上的文字显示 。 <meta/> 主要用于设置网页中的一些元数据,元数据不是给用户看的。
用来设置网页的字符集,避免乱码问题 <meta charset="utf-8"> chrome 62以上的版本,自动识别中文
Name:指定数据名称 concent:指定数据内容
Name的取值: Keywords:表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开。为搜索引擎提供服务。 <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,相机,数码,京东"/>
description 用于指定网站的描述 <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/> 网站的描述会显示在搜索引擎的搜索的结果中。
<meta name="Keywords" content="关键词的内容"> <meta name="description" content="描述的内容">
<style><style>定义网页的内部样式 <script></script>定义或者引用js文件 <link/> 引用外部样式文件 |
4.body元素 定义网页的主体 body的属性 bgcolor 背景颜色 text 字体颜色 取值:合法的颜色值---->颜色的应为单词 |
作用:在页面中以醒目的方式显示文本 语法 <h1></h1>一级标题 <hn></hn> n:1~6 ... <h6></h6>六级标题 特点: 1.文本加粗 2.字号发生变化 3.独占一行,上下有垂直间距
从h1~h6重要性递减,h1最重要,h6最不重要 h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1 一般情况下标题标签只会使用到h1~h3,h4~h6很少用 标题标签都是块元素
属性align 设置标签内容水平方向对齐方式 取值:left/center/right
hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup
<hgroup> <h1>回乡偶书二首</h1> <h2>其一</h2> </hgroup> |
语法:<p></p> 作用:突出的表示一段文字 特点:独立成行,上下有垂直的间距 p也是一个块元素 属性:align |
<br>或者<br/> |
<hr>或者<hr/> width="50%" 表示水平线的宽度,取值为%或者px为单位的数字 size="5px" 表示水平线的尺寸(粗细),取值为%或者px为单位的数字 align="left" 对齐方式 color="red" 设置水平线的颜色 |
<pre></pre> 使标签内部的文本,保留其格式,在页面上显示 空格折叠现象,一个或多个空格,会被浏览器渲染成一个空格显示 一个或多个回车,会被浏览器渲染成一个空格显示 |
空格  ; < < > > © ©; ® ® ¥ ¥ x × |
<!--老式写法 新式写法-->
<b>加粗</b> <strong>加粗</strong>
<i>倾斜</i> <em>倾斜</em>
<u>下划线</u> <ins>下划线</ins>
<s>删除</s> <del>删除</del>
上标 <sup></sup> 下标 <sub></sub> |
补充:
1、blockquote 表示一个长引用,块元素
鲁迅说:
<blockquote>
这句话我是从来没有说过的!
</blockquote>
2、q表示一个短引用,行内元素
子曰<q>学而时习之,乐呵乐呵!</q>
1.块分区,用于页面中布局 <div></div> 独立成行 |
2.行分区,处理同一行文本的不同样式 <span></span> 可以与其它的span和文字共用一行 |
1.块级元素 在网页中,单独成行,就是块级元素 在网页中一般通过块元素来对页面进行布局 从上往下排列 常见块级元素 h1~h6 p div |
2.行内元素(行级元素) 在页面中,与其他行内元素/行内块共用一行 行内元素主要用来包裹文字 从左往右排列 页面中常见行内元素 i em b strong u sup sub span |
3.行内块元素 显示的方式与行内元素相同,但是具备块级元素的特征
一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素 块元素中基本上什么都能放 p元素中不能放任何的块元素
注意:浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正,对在内存中的源码进行修正 比如: 标签写在了根元素的外部 p元素中嵌套了块元素 根元素中出现了除head和body以外的子元素 ... ... |
4.table 表格的宽高是由表格的内容决定的 内容多,就宽一些,高一些, 表格中所的数据都预读到内存,一次性画到页面上 |
1.使用 <img>或者<img/>
图片标签用于向当前页面中引入一个外部图片 使用img标签来引入外部图片,img标签是一个自结束标签 img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)
属性 src="url" url--图片资源路径 alt:图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示。 搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所收录。 width图片的宽度(单位是像素) height图片的高度 宽度和高度中如果只修改了一个,则另一个会等比例缩放
注意: 一般情况在pc端,不建议修改图片的大小,需要多大的图片就裁多大 但是在移动端,经常需要对图片进行缩放(大图缩小)
补充:图片的格式: jpeg(jpg) 支持的颜色比较丰富,不支持透明效果,不支持动图 一般用来显示照片 gif 支持的颜色比较少,支持简单透明,支持动图 颜色单一的图片,动图 png 支持的颜色丰富,支持复杂透明,不支持动图 颜色丰富,复杂透明图片(专为网页而生) webp 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式 它具备其他图片格式的所有优点,而且文件还特别的小 缺点:兼容性不好
base64 将图片使用base64编码,这样可以将图片转换为字符,通过字符的形式来引入图片,一般都是一些需要和网页一起加载的图片才会使用base64
效果一样,用小的 效果不一样,用效果好的 |
2.URL Uniform Resource Locator 统一资源定位符 简称:路径 |
3.URL路径的表现形式 1.绝对路径,一个写完整的路径 通信协议+主机地址+文件目录结构+文件的具体名称 合适使用: 1.使用网络资源的时候,使用绝对路径 优点:不占据自己服务器的存储空间 缺点:不稳定 2.使用本地资源,使用绝对路径(项目中100%用不到) 从最高盘符开始查找 C/D/E/F/G 项目中不用 |
2.相对路径(参照物是html本身) 1.图片与html文件在同一个目录下,src直接引用图片名称 src="3.jpg"
./表示当前文件所在的目录,可以省略 ../表示当前文件所在目录的上一级目录。 |
1.语法 <a href="#"></a> <a href="http://www.tmooc.cn/">Tmooc</a>
超链接可以让我们从一个页面跳转到其他页面, 或者是当前页面的其他的位置
属性: href指定跳转的目标路径 值可以是一个外部网站的地址 也可以写一个内部页面的地址
target:指定打开链接的方式 取值:_self 默认值,在当前标签页打开新链接,新页面替换之前的页面。 _blank 在新的标签页打开链接
超链接也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素 |
2.其它的表现形式 <!--下载 --> <a href="1.zip">下载</a> <!--新建邮件,前提:本机必须有邮件软件的客户端 --> <a href="mailto:chengliang@tedu.cn">新建邮件</a> <!--执行js脚本 --> <a href="javascript:alert(1111111)">执行js</a> <!--返回当前页面的顶部 --> <a href="#">返回顶部</a> 空链接: <a href = "##"></a>
#表示空链接,当写一个#时,单击a会回到顶部,##不回到顶部
注意: 1、<!--在开发中可以将#作为超链接的路径的展位符使用--> <a href="#">这是一个新的超链接</a> 2、<!--可以使用javascript:;来作为href的属性,此时点击这个超链接什么也不会发生--> <a href="javascript:;">这是一个新的超链接</a>
|
锚点就是网页中的一个记号,跳转到页面的指定位置
定义锚点(指定位置) 使用a标签的name属性定义锚点 <a name="锚点名称"></a> |
定义锚点(指定位置) 任意标签的id属性定义锚点 <any id="id"> </any> |
链接到锚点 使用a标签链接锚点,#锚点名称 <a href="#锚点名称">回到锚点</a> |
链接到锚点 使用a标签链接锚点, #id <a href="#id">回到锚点</a> |
默认按照从上到下的顺序来显示数据,并且可以在数据前添加标识 使用列表布局(去掉标识,从上到下,从左到右排列) |
1.有序列表<ol></ol> order list |
2.无序列表<ul></ul> unorder list |
3.列表项 <li></li> list item |
1.有序列表的属性 ol type 设置标识符的类型 取值 : 默认值,数字 a A 字母 i I 罗马数字 start 指定起始编号 取值:无单位数字 |
2.无序列表的属性 ul type:设置标识 取值 disc 默认值 实心圆 circle 空心圆 square 实心方块 none 无 |
所有的嵌套必须只能写在li中 ul(ol)只能包含li,li里可以包含任何其他标签
|
1.作用 做名词解释使用,用于图文混排 <dl> <dt>需要被解释说明的名字</dt> <dd>对名词的解释内容</dd> </dl> 10:17上课 |
<table> <tr> <td></td> <td></td> <td></td> </tr> ..... </table>
在table中使用tr表示表格中的一行,有几个tr就有几行 在tr中使用td表示一个单元格,有几个td就有几个单元格 |
1.table标签的属性 border:设置边框 border=“1” width:设置表格的宽 height:设置表格的高 可以设置宽高,内容小于宽高的,按宽高尺寸,内容大于宽高,按内容改变尺寸 align:设置表格的对齐方式(table自己的水平位置) 取值 left/center/right bgcolor:背景颜色 cellpadding:设置单元格内边距(边框到内容的距离) cellspacing:设置单元格外边距(边框与边框之间的距离),默认是2px |
|
2.tr的属性 1.align设置当前行内容的水平对齐方式(设置表格内容的对齐方式) 2.valign设置当前行内容的垂直对齐方式 取值:top/middle/bottom 3.bgcolor 当前行的背景颜色 |
3.td的属性 width height align valign bgcolor colspan rowspan |
1.跨列 colspan=? 从指定的单元格位置处开始,横向向右合并?个单元格(包含自己) 被合并掉的单元格,要删除 |
2.跨行 rowspan=? 从指定的单元格位置处开始,纵向向下合并?个单元格(包含自己) 被合并掉的单元格,要删除 |
1.表格的标题 <caption></caption> 如果设置标题,必须将<caption>放在<table>之后 2.行/列的标题 <th></th> 代替<td></td> 加粗,居中 |
1.行分组 可以将连续几个行,划分到一个组中,进行统一管理 表头行 <thead></thead> 表格最上面一行的标题放在thead中 表主体 <tbody></tbody>允许将若干放在tbody中进行统一管理 表尾行 <tfoot></tfoot> 表格中最后一行放在tfoot中 |
2.表格的嵌套 一张表格中,所有的嵌套的表格,只能放在td中 |
7.表单(重点********&难点***)
1.提供可视化的输入控件 2.收集用户填写的信息并提交给服务器
在现实生活中表单用于提交数据 在网页中也可以使用表单,网页中的表单用于将本地的数据提交给远程的服务器 使用form标签来创建一个表单 |
1.前端部分 提供表单的控件,与用户做交互的可视化控件 2.后端部分 对提交的数据进行处理(接口) |
<form></form> |
属性
1.action 通常是定义服务器处理数据的地址,接口(url) 默认,提交给本页地址 |
2.method 指定表单数据提交的方式(方法) 1.get(默认值) 明文提交,提交时内容会显示在浏览器地址栏上 提交的数据有大小限制,2kb 向服务器要数据的时候使用get 2.post 提交数据无大小限制 隐式提交,提交的数据不会显示在地址栏中 把数据传递给服务器的时候,使用post 3.delete 4.put |
3.enctype 编码方式 设置表单允许将什么样的数据提交给服务器 1.提交普通字符,不能有特殊符号 enctype ="text/plain" 2.允许将任意字符提交给服务器 application/x-www-form-urlencoded 3.允许将文件提交给服务器 multipart/form-data |
能够与用户进行交互的可视化元素 |
1.input元素 2.textarea 多行文本域 3.下拉选择框 4.其它元素 |
在页面中提供各种各样的输入控件,通过type属性来设置输入控件的类型 <input>或者<input/> type 设置输入控件的类型 name 为控件定义名称,提供给服务端使用(必须值) vaule 控件的值,提交给服务端使用 disabled 禁用控件,不能操作也不能提交,无值属性 |
type取值
1.文本框和密码框 type="text" 默认值 type="password" 属性 1.maxlength 限制输入的最大字符数 2.readonly 只读,只能看不能写,但允许被提交,无值属性 3.placeholder 占位符,默认显示在控件上文本,只要得到焦点,文本就无效了,此文本不能提交 4.autocomplete="off" 关闭自动补全 5.autofocus 设置表单项自动获取焦点 |
2.按钮 type="submit"提交按钮 将表单中的数据,提交给服务器 type="reset"重置按钮 让表单内容恢复到初始化状态 type="button" 无功能按钮,可以调用js脚本 |
3.单选按钮和复选按钮 单选按钮 type="radio" 多选按钮 type="checkbox"
像这种选择框,必须要指定一个value属性,value属性最终会作为用户的填写的值传递给服务器,不然提交的值是on。 多个选择按钮的name属性值必须一致。除了定义控件名称,还起到分组的效果 checked:设置默认选中项,无值属性 checkbox的name要写成数组hobby[] |
4.隐藏域 type="hidden" 想提交给服务器,但是不想展示给用户看的数据,使用隐藏域 |
5.文件选择框 type="file" 注意: method="post" enctype="multipart/form-data" multiple 无值属性,可以同时上传多个文件 需要name属性值为数组 |
允许录入多行数据的文本框 <textarea></textarea> name 控件的名称 readonly 只读 cols 指定文本域的列数,以英文单词为准,中文减半 rows指定文本域的行数, |
<select> 表示一个下拉选 <option></option> 表示下拉选中的一个选项 ....... </select> 注意: 当option没有value属性时,提交的时候select的value为选中option的内容。 当option有value,提交时,select的value为选中option的value。 select属性 name选项框的名称 size 默认为1,定义显示选项的数量。 如果值大于1的数字。下拉选表现为滚动列表 multiple 无值属性,可以多选,但是name要用数组 设置了multiple之后,就算size="1" 也是滚动列表 option的属性 value selected设置默认选中项 |
1.label 文本与表单控件的关联 <label></label> 属性 for:要与label中文字发生关联的form控件的id |
2.为控件分组 <fieldset></fieldset> 为控件分组 <legend></legend> 分组标题 |
3.浮动框架 允许在一个网页中,引入另外一个网页 <iframe></iframe> 属性 src="url" width="100%" height="200px" 高度存在问题,需要使用js.dom来解决 scrolling="no" 不显示滚动条 frameborder="0" 不显示边框
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
|
标签:自动识别 font tor nbsp 使用 收录 主题 编码方式 text
原文地址:https://www.cnblogs.com/wangjing-web/p/13194248.html