一、字体标签
字体标签包含：h1~h6、、、、、、、
1、标题：标题使用h1~h6标签进行定义。
定义最大标题，定义最小标题。具有align属性，属性值可以是：left、center、right
<h1>张无忌h1>
<h2>张无忌h2>
<h3>张无忌h3>
<h4>张无忌h4>
<h5>张无忌h5>
<h6>张无忌h6>
<h1>张无忌h1> <h2>张无忌h2> <h3>张无忌h3> <h4>张无忌h4> <h5>张无忌h5> <h6>张无忌h6>
2、字体标签：
（1）、color = "红色"或者color = "#ffoocc" 或者color = "new rgb(0,0,255)"：设置字体颜色。设置方式：单词 #ff00cc rgb(0,0,255)
（2）、size：设置字体大小。取值范围只能是1~7.取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决
（3）、face = "微软雅黑"：设置字体样式。注意在写字体时，”微软雅黑“这个字不也能写错。
实例：face="微软雅黑" color="green" size="7">字体
3、粗体标签或
实例：
<b>周芷若b> <strong>张无忌strong>
结果：
4、下划线标记 中划线标记
实例：
<u>小昭u> <s>赵敏s>
结果：
5、斜体标记或
实例：
<i>倚天屠龙记i> <em>张无忌em>
结果：
6、上标签和下标签
实例：
5<sup>2sup> 6<sub>2sub>
结果：
7、特殊字符 （HTML特殊字符参考表：HTML特殊字符参考表）
：空格（non-breaking spacing）
< ：小于号（less than）
> ：大于号（grealter than）
& ：符号&
"e; ：双引号
' ：单引号
© ：版权
™ ：商标
@：如果想把
作为一个文本在页面上显示，直接写
是肯定不行的，因为这代表的时一个段落标签，这里要用到转义符：<,>
这是一个HTML语言的<p>标签
结果：
二、排版标签
1、段落标签
段落：是英文paragraph的缩写
属性：
align='属性值'：对齐方式。 属性值包括：left、center、right
示例：
结果：
HTML标签是分等级的，HTML将所有的标签分为两类：
文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片表单元素。
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。
p标签是一个文本级标签，p标签里面只能放文字、图片、表单元素，其他的一律不能放（p标签也不能放）。
2、块级标签
div和span是非常重要的标签，div的语义是division"分割"；span的语义就是span“范围、跨度”。
div：把标签中的内容作为一个块儿来对待（division）。必须独占一行。
div标签的属性：
align = "属性值"：设置块儿的位置，属性值可选择：left、right、center
和 如果单独在网页中插入两个元素，不会对页面产生任何影响。这两个元素是是专门为定义CSS样式而生的。或者说div+css来实现各种样式。 示例： 效果： div在浏览器中，默认是不会增加任何效果的，但是语义变了，div中的所有元素只有个小区域。 div标签是一个容器级标签，里面什么都可以放，甚至可以放div自己。 span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。就是说，span里面只能放置文字、图片、表单元素。span里不能放p、h、ul、dl、ol、div。 span示例： div示例： 3、换行标签 当你想结束一行而又不想开始一个新的段落时， 示例： 效果： 在上图中显示，p标签和 标签会在段落的前后自动插入一个空行，而 4、水平线标签 水平分割线（horizontal rule）可以在视觉上将文档分割成各个部分 示例： 张无忌 我是周芷若 效果： 5、内容居中标签 此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。 示例： 倚天屠龙记 我是张无忌 效果： 6、预定义（预格式化）标签: 含义：将保留其中的所有的空白字符（空格、换行符），原封不动的输出结果（告诉浏览器不要忽略空格和空行） 说明：真正的排版网页过程中， 示例： 效果： 所有的浏览器默认情况下都会忽略空格和空行， 1、外部链接：链接外部文件。 示例： 效果： a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚，是一个文本级的标签。 href是英语hypertext reference超文本地址的缩写。 当然我们还可以直接点进链接，访问一个网址。示例： 2、锚链接： 指给超链接起一个名字，作用是在本页面或者其他页面的不同位置进行跳转。比如说，在网页底部有一个向上的箭头，点击箭头后回到顶部，这个就是利用到了锚链接。 首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。示例： 解释： name = “top” 顶部这个锚的名字叫做top，然后再底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也就出现了#top）。"#"号表示跳到名为top的特定位置，这是规定，如果少了#号，点击之后就会跳到top这个文件或者top这个文件夹中去了。 如果将"href="#top">回到顶部" 改成 "href="test.html#top">回到顶部 ",这就表示点击之后，跳转到test.html页面的top锚点中去了。 说明：name属性是HTML4.0以前使用的，id属性是HTML4.0之后才使用的。为了向前兼容，因此，name和id两个属性都要写上，并且值都是一样的。 3、邮件链接： 示例： 效果：点击之后，会弹出outlook，作用不大。 前提是计算机中必须安装邮件客户端，并且配置好了邮件相关信息 4、特殊的几个链接： （1）返回页面顶部的位置 （2）与js有关： Javascript：；表示什么都不执行，这样点击时就没有任何反应，例如：内容 javascript：是表示再触发默认动作时，执行一段JavaScript代码。例如："javascript:alert(1)">内容 5、超链接的属性： href：目标URL title：悬停文本 name：主要用于设置一个锚点的名称 target：告诉浏览器用什么方式来打开目标页面。target属性值有以下几个值： _self：在同一个网页中显示（默认值） _blank：在新的窗口打开 _parent：在父窗口中显示 _top：在顶级窗口中显示 ps：a是一个文本级的标签 比如一个段落中的所有文字都能被点击，那么应该是p包含a. 而不是a包裹p: a的语义要小于p，a就是可以当作文本来处理，所以p里面相当于放的是纯文字 img：代表的就是一张图片，是半边标记 img是自封闭标签，也称但标签。 1、能插入的图片类型： 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。而psd、ai是不能插入的图片格式。 HTML页面不是直接插入图片，而是插入图片地址，所以也要把图片上传到服务器。 2、src：属性：图片的相对路径和绝对路径 src属性：指的是图片的路径。写图片路径时，有两种写法：相对路径、绝对路径 （1）、相对路径： 相对当前页面所在的路径。两个标记 . 和 .. 分别表示当前目录和父路径。 示例： img是image“图片”的简写，src是英语source“资源”的缩写 示例： 2、绝对路径： （1）、以盘符开始的绝对路径。示例： （2）、网络路径。示例： 3、相对路径和绝对路径的总结 相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。 相对路径使用有一个前提，就是网页文件和你的图片必须在一个服务器上。 无论是在a标签、img标签，如果要使用路径，只用两种能用，就是相对路径和绝对路径。 相对路径就是../images/这种路径，从自己出发，找到别人； 绝对路径就是http://开头的路径。 绝对不允许使用file://开头的东西，这样是错误的。 4、img标签的常用其他属性 width：宽度 height：高度 title：提示性文本。共有属性。也就是鼠标悬停时出现的文本。 align：指图片的水平对齐方式，属性值可以是：left、center、right alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语alternate“替代”的意思 示例; 文本及的标签显示在浏览器上时，不管你的照片多高，它总是会底边对齐，这是一种现象，“高矮不齐，底边对齐” 注意事项： 如果要想保证图片等比例缩放，请设置width和height中的一个 如果想实现图文混排的效果，请使用align属性，取值为left或right 如果想点击图片的时候跳转到某个链接，应该是： 列表标签分为三种：无序列表 1、无序列表 ul:unordered list,无序列表的意思 li:list item,列表项的意思 示例： 效果： 注意： li不能单独存在，必须包裹在ul里面；反过来说，ul的”儿子“不能时别的东西，只能有li。 ul的作用，并不是给文字增加小圆点的，而是增加无序列表的语义的。 属性： type = "属性值"。属性值可以选：disc(实心圆点，默认)、square(实心方点)、circle(空心圆) 效果如下： 列表之间是可以嵌套的，示例： 声明：ul的儿子只能是li。但是li是一个容器级标签，li里面什么都能放，甚至可以再放一个ul 2、有序列表 ol：ordered list的意思 示例： 属性： type = "属性值"。属性值可以是：1（阿拉伯数字，默认）、a、A、i、I。结合start属性表示从几开始。 示例： 有序列表和无序列表一样而可以进行嵌套，。 ol和ul就是语义不一样，怎么使用都一样 ol里面只能有li，li必须被ol包裹，li是容器级。 3、自定义列表 dl：英文单词，definition list,没有属性。dl的子元素只能是dt和dd. dt:definition title，列表的标题，这个标签是必须的 dd:definition description 列表的列表项，如果不需要它，可以加 dt、dd只能在dl里面，dl里面只能由dl、dd 示例： 效果： 自定义列表表达的语义是两层： （1）是一个列表，列出了几个dd项目 （2）每一个词都有自己的描述项 dd是描述dt的。 自定义列表用法非常灵活，可以一个dt配很多dd: 示例： 还可以拆开，让每一个dl里面只有一个dt和dd，这样更清晰一些： dd、dt都是容器级标签，想放什么都可以。所以现在应该更加清晰的知道：用什么标签，不是根据样子来决定的，而是语义（语义本质上是结构） 1、表格标签用 一个表格 示例： 效果： border：边框。像素为单位。px style="border-collapse:collapse;"：单元格的线和表格的边框线合并 width：宽度。像素为单位。 height：高度。像素为单位。 bordercolor：表格的边框颜色。 align：表格的水平对齐方式。属性值可以填：left right center。 这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元个标签 cellpadding：单元格内容到边的距离，像素为单位，默认情况下文字是紧挨着左边那条线的，即默认情况下的值为0。（不是单元格内容到四条边的距离，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir = “rtl”，那就指的是内容到右边那条线的距离） cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0。 bgcolor = "#99cc66"：表格的背景颜色。 background = "路径src/..."：背景图片。 背景图片的优先级大于背景颜色。 单元格带边框的效果，示例： 备注：表格中很细表格边线的制作，css写法： 2、 一个表格就是一行一行组成的。 属性： dir：共有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right,默认），rtl:从右到左(right to left) bgcolor：设置这一行的单元格的背景色。（没有background属性，即无法设置这一行的背景图片，如果非要设置，可以用css实现。） height：一行的高度。 align = "center"：一行的内容水平居中显示，取值：left、center、right valign = "center"：一行的内容垂直居中，取值：top、middle、bottom 3、 属性： align：内容的横向对齐方式。属性值可以填：left、right、center。(如果想让每个单元格的内容都居中，这个属性不太好，以后用css来解决。) valign：内容的纵向对齐方式。属性值可以填：top、middle、bottom。 width：绝对值或者相对值（%） height：单元格的高度。 bgcolor：设置这个单元格的背景颜色。 background：设置这个单元格的背景图片。 4、单元格的合并： 如果要将两个单元格合并，那肯定就要删掉一个单元格。 单元格的属性： colspan：横向合并。例如colspan = "2" 表示当前单元格在水平向上要占据两个单元格的位置。 rowspan：纵向合并。例如rowspan = "2" 表示当前单元格在垂直方向上。 横向合并，示例： 横向合并，示例： 5、 属性同 6、 示例： 7、表格的标签、 这三个标签有与没有的区别： （1）、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。 （2）、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才显示出来。 示例： 效果： 效果： 5、表单的语义化 比如在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候就要用到表单的语义化。 示例： 效果： 6、 对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字是无法选中的，于是label标签可以做到。本质上讲，“男”、“女”这两个文字和input标签是没有关系的，而label就是解决这个问题的。通过label把input和汉字包裹起来作为整体。 解决方法： 复选框也有label：（任何表单元素都有label） =========================================================================================== 标准的div+css布局，常用的标签： 转载于:https://www.cnblogs.com/LW-5208/articles/9656110.html
"en">
"UTF-8">
@这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。
这个class属性就与css有很大关联。
（已废弃）
标签就可以做到。无论你将它放到何处，
标签都会产生一个强制的换行。西游记里，八十难都给了猴子，但唯独女儿国这一难给了唐僧。
生劫易度，情劫难过，唐僧还是过关了。
现实世界里，“唐僧”冯绍峰成功娶到了“女儿国国王”赵丽颖。
标签的区别在于：
标签没有空行；而且
标签没有属性，也没有结束标签，。
（已废弃）
生劫易度，情劫难过，唐僧还是过关了。
现实世界里，“唐僧”冯绍峰成功娶到了“女儿国国王”赵丽颖。
标签几乎用不着。但在PHP中用于打印一个数组时使用。
秋夕
作者：杜牧
银烛秋光冷画屏，轻罗小扇扑流萤。
天阶夜色凉如水，坐看牵牛织女星。
可以解决这个问题。
标签也用的比较少。
三、超链接（三种形式）
四、图片标签
"xinhui.jpg" alt="">
"./xinhui.jpg" alt="">
"../tu.jpg" alt="">
"images/tu.jpg" alt="">
代码表示的意思是当前有一个并列的文件夹images，在文件夹images中存放了一张图片tu.jpg
"D:\py\web\liying.jpeg" alt="">
"http://pic.58pic.com/58pic/14/84/31/25C58PICBQi_1024.jpg" alt="">
"./html/赵丽颖.jpg" alt="颖宝" title="赵丽颖" width="700" height="300">
五、列表标签
、有序列表
、自定义列表
,无序列表中的每一项都是
，里面的每一项都是
自定义列表的作用非常大。
六、表格标签
表示。
是由每行
组成的，每行是由 组成的。所以一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
张无忌
男
25
明教
周芷若
女
20
峨眉派
张三丰
男
125
武当派
的属性
进行设置）
style="border-collapse:collapse;"
:行
标签、标签
：单元格
：加粗的单元格。相当于 +
标签
"1">
张无忌
男
25
"3">明教
金毛狮王
男
20
阳顶天
男
125
七、表单标签
<from>
from>
"radio" name="sex">男
"radio" name="sex">女
"radio" name="sex" id="nan">
"radio" name="sex" id="nv">
input元素要有id，然后label标签有一个for属性，和id相同，那么这个label和input就有了绑定关系了。 "checkbox" id="kk">
div p h1 span a img ul ol dl input
你可能感兴趣的:(javascript,php)