body中的相关标签

body标签中的相关标签

标签的结构：

　　1、行内标签

　　　　• 单纯的行内标签（span strong em i del a）

　　　　　　（1）在一行内显示

　　　　　　（2）不能够设置宽高、默认的宽和高是内容的填充

　　　　• 行内块标签（img input）

　　　　　　（1）在一行内显示

　　　　　　（2）可以设置宽和高

　　2、块级标签（div p h1~h6）

　　　　（1）独占一行

　　　　（2）可以设置宽高，如果不设置宽高，默认宽度是父亲的100%，高度是内容的高度

标签的思维导图参考：小马哥

　　https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c

一、字体标签

字体标签包含：h1~h6、<span>、<em>、<b>、<u>、<sup>、<sub>

1、标题

　　标题使用<h1>~<h6>标签进行定义，<h1>定义最大的标题、<h6>定义最小的标题

2、字体

　　<font>（已废弃）

3、粗体

　　<b> 或 <strong>（已废弃）

4、斜体

　　<i> 或 <em>（已废弃）

5、下划线、中划线

　　<u>、<s>（已废弃）

6、上标、下标

二、特殊字符

　　 ：空格（non-breaking spacing，不断打空格），记住！！！

　　<：小于号（less than），记住！！！

　　>：大于号（greater than），记住！！！

　　&：符号&

　　"：双引号

　　'：单引号

　　©：版权©，记住！！！

　　™：商标™

　　比如说，你想把<p>作为一个文本在页面上显示，直接写<p>是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到特殊字符。代码应该这么写：

　　这是一个HTML语言的<p>标签

　　效果显示：

三、排版标签 p、div

1、段落标签 <p>

　　段落：是英文paragraph的缩写。

注意：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

　　段落, 各占一行, 内部不能够放容器性的标签, 如 h1 ~ h6 , p , div

2、块级标签 <div>和行内标签 <span>

　　div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。　

　　<div>：把标签中的内容作为一个块来对待，必须单独占据一行

　　　　div的标签属性：align="属性值"；设置块的位置，属性值可以选择 left，right，center

　　<span>：和div的区别在于<span>不是换行的，而<div>是换行的

如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。

div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。

　　div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

　　span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。

　　就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

3、换行标签 <br />

　　当你打算结束一行，而又不想开始一个新的段落时，<br />标签就派上用场了。无论你将它置于何处，<br />标签都会产生一个强制的换行。

注意<br /> 没有结束标签，把<br>标签写为 <br /> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。

4、水平线标签 <hr />

　　水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

5、内容居中标签 <center> （已废弃）

center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。到H5里面，center标签不建议使用。

6、预定义（预格式化）标签 <pre>

含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）

　　注意：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

　　PS：Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。审查元素功能的快捷键是F12。

四、超链接标签<a>

　　超链接主要有3种形式：

1、外部链接：连接到外部的文件。示例如下：

<a href="new.html">点击进入到新网页</a>
<a href="http://www.baidu.com" target="_blank">进入百度</a>

　　a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。a是一个文本级的标签。

href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。

2、锚链接

　　指给超链接起一个名字，作用是在本页面或者其他页面的不同位置进行跳转。比如说，在网页底部有一个向上的箭头，点击箭头后回到顶部，这个就是利用到了锚链接

　　首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。效果如下：

　　上图中解释：

　　11行代码表示，顶部这个锚的名字叫做top。
　　然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#top）。注意上图中红框部分的#号不要忘记了，表示跳到名为top的特定位置，这是规定。如果少了#号，点击之后，就会跳到top这个文件或者top这个文件夹中去。

　　如果我们将上图中的第23行代码写成：

<a href="new.hhml#top">回到顶部</a>

就表示，点击之后，跳转到new.html页面的top锚点中去。

　　说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。

3、邮件链接

　　代码举例：<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

效果：点击之后，会弹出outlook，作用不大。

前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。

4、几个特殊的链接

　　a、返回页面顶部的位置：

　　　　<a href="#">跳转到顶部</a>

　　b、与js有关：

　　　　(1) javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应，例如：

　　　　　　我们可以这样写来阻止a标签的默认点击行为。

　　　　(2) javascript: 是表示在触发<a>默认动作时，执行一段javascript代码。例如：

5、超链接的属性（重要）　

href：目标URL
title：悬停文本。
name：主要用于设置一个锚点的名称。
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
- _self：在同一个网页中显示（默认值）
- _blank：在新的窗口中打开。
- _parent：在父窗口中显示
- _top：在顶级窗口中显示

　　blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。
　　也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。

五、图片标签<img />

　　img：代表的就是一张图片。img是自封闭标签，也称为单标签。

1、img的标签属性

src	要插入的图片的相对路径或绝对路径
alt	当图片显示不出来的时候，代替图片显示的内容，alt是英语alternate"替代"的意思，（有的浏览器不支持）
align	图片的水平对齐方式，属性值可以是：left、center、right
title	指示性的文本，公有属性，也就是鼠标悬停时出现的文本
width	100px; 宽度
height	100px; 高度

2、src属性详解

　　html页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

这里涉及到图片的一个属性：src属性：指图片的路径。

在写图片路径时，有两种写法：相对路径、绝对路径

　　（1）相对路径

　　　　相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径

<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src=".\2.jpg"> 
<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">

<img src="images/1.jpg">   //当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg

　　（2）绝对路径

　　　　以盘符开始如下：

<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">

　　　　网络路径如下：

<img src="http://www.baidu.com/2016040102.jpg">

　　总结：

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。

相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

问题：我的网页在C盘，图片却在D盘，能不能插入呢？

　　　　答案：用相对路径不能，用绝对路径也不能。

　　　　注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。

综上：

无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径；

　　　　相对路径，就是../image/ 这种路径。从自己出发，找到别人；

　　　　绝对路径，就是http://开头的路径；

　　　　绝对不允许使用file://开头的东西，这个是完全错误的！

3、能插入的图片的类型

　　能够插入的图片类型有：jpg（jpeg）、gif、png、bmp。各类型之间有什么区别，介绍css时再讲。

不能往网页中插入的图片格式有：psd、ai。

4、注意事项

　　（1）文本级的标签显示在浏览器上时，不管你的图片多高，它总会底边对齐，这是一种现象，“高矮不齐，底边对齐”；

（2）如果想要保证图片等比例缩放，请只设置width和height中其中一个；

　　（3）如果想实现图文混排的效果，请使用align属性，取值为left或right；

（4）如果想点击图片的时候跳转到某个链接，应该是：

         <a href="跳转的目标地址">
             <img src="images/1.jpeg" alt="加载失败" title='风景图'>
　　　　　</a>

六、列表标签 ul、ol、dl

　　列表标签分为3种：

1、<ul>（无序列表）（常用）

　　无序列表<ul>，无序列表中的每一项都只能是<li>

　　ul：unordered list，无序列表的意思 li：list，列表项的意思

<ul>
         <li>张三</li>    
         <li>李四</li>    
         <li>王五</li>    
</ul>

　　注意事项：

　　　　（1）li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能是li；

　　　　（2）列表之间是可以嵌套的（li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul）；

　　　　（3）type属性html4.01中已废弃，html5不支持；

　　　　　　　　type="属性值"；属性值可以为：disc(实心原点，默认)、square(实心方点)、circle(空心圆)

　　　　（4）这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

　　　　（5）<ul>默认会有小圆点，使用<ul>时可以先清除样式：

ul{
　　list-style:none;
}

　　　　（6）<li>标签属于块级标签

2、<ol> 有序列表

　　Ordered List（英文）

　　type="属性值"；属性值可以是：1、a、A、i、I 开始的排序。结合start属性从几开始。

效果：

　　（1）无序列表和有序列表一样也是可以嵌套的

　　（2）无序列表和有序列表除了语义不一样，怎么使用时一样的

　　（3）<ol>里面只能有<li>，<li>必须被<ol>包裹，<li>是容器级的，可以包含任何的内容

　　（4）<ol>有序标签用的不多

3、<dl>定义列表

　　dl（definition list）没有属性，dl的子元素只能是dt和dd。

　　<dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。如下示例：

<dl>
        <dt>站点信息</dt>
        <dd>意见反馈</dd>
        <dd>关于我们</dd>
        <dd>免责声明</dd>
        <dd>文章归档</dd>
    </dl>

       或者：

    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
    </dl>

　　（1）dt（definition title）列表的标题，这个标签是必须写的；

　　（2）dd（definition description）列表的列表项，如果不需要它，可以不加；

　　（3）定义列表用法很灵活，可以一个dt配多个dd，也可以让每一个dl里只有一个dt和dd；

　　（4）dt，dd都是容器级标签，想放什么都可以，所以现在应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）；

七、表格标签 table

　　表格标签用<table>表示，一个表格<table>是由每行<tr>组成的，每行是由<td>或者<th>组成的，所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。如下表格示例：

<table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

1、<table>的属性

border：边框。像素为单位。
style="border-collapse:collapse;"：单元格的线和表格的边框线合并
width：宽度。像素为单位。
height：高度。像素为单位。
bordercolor：表格的边框颜色。
align：表格的水平对齐方式。属性值可以填：left right center。

注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。

注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66"：表格的背景颜色。
background="路径src/..."：背景图片。

背景图片的优先级大于背景颜色。

2、<tr> 行

　　一个表格就是由一行一行组成的

dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色。

注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
height：一行的高度
align="center"：一行的内容水平居中显示，取值：left、center、right
valign="center"：一行的内容垂直居中，取值：top、middle、bottom

3、<td> 单元格

align：内容的横向对齐方式。属性值可以填：left right center。

如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
valign：内容的纵向对齐方式。属性值可以填：top middle bottom
width：绝对值或者相对值(%)
height：单元格的高度
bgcolor：设置这个单元格的背景色。
background：设置这个单元格的背景图片。

4、单元格的合并

　　如果要将两个单元格合并，那肯定就要删掉一个单元格。

　　横向合并：colspan，例如colspan=”2”表示当前单元格在水平方向上要占据两个单元格的位置。

　　纵向合并：rowspan，例如rowspan=”2”表示当前单元格在垂直方向上占据两个单元格的位置。

<table border="1">
        <tr>
            <th colspan="2">userinfo</th>
        </tr>
        <tr>
            <td >First Name:</td>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <td rowspan="2">Telephone:</td>
            <td>555 77 854</td>
        </tr>
        <tr>
            <td>555 77 855</td>
        </tr>
    </table>

5、<caption> 表格的标题，使用时和<tr>标签并列，如下示例：

<table border="1">
       <caption>Monthly savings</caption>
       <tr>
           <th>Month</th>
           <th>Savings</th>
       </tr>
       <tr>
           <td>January</td>
           <td>$100</td>
       </tr>
    </table>

6、表格的<thead>标签、<tbody>标签、<tfoot>标签

　　这三个标签有与没有的区别：

　　（1）如果写了，那么这三部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。

（2）当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

八、表单标签 form

1、<form> 标签

　　表单标签用<form>表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写和选择的。

属性：　　

- name：表单的名称，用于JS来操作或控制表单时使用；
- id：表单的名称，用于JS来操作或控制表单时使用；
- action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
- method：表单数据的提交方式，一般取值：get(默认)和post

　　 form标签里边的action属性和method属性后面再详细介绍，现在稍微了解一下：action属性就是表示将表单提交到哪里。method属性表示用什么http方法提交，有get、post两种。

　　（1）get 提交

　　　　将表单数据，以“name=value”形式追加到action指定的处理程序的后面，两者间用“？”隔开，每一个表单的“name=value”间用“&”号隔开。

　　　　特点：只适合提交少量信息，并且不太安全（不要提交敏感数据），url中能看到提交的数据，提交的数据类型只限于ASCII字符。

　　（2）post 提交（常用的方式）

　　　　将表单数据直接（隐藏，url中不显示）发送到action指定的处理程序。post发送的数据url不可见。action指定的处理程序可以获取到表单数据。

　　　　特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的（word、excel、rar、img）。

　　补充：

　　　　enctype:

　　　　表单数据的编码方式（加密方式），取值可以是：application/x-www-form-urlencoded、multipart/form-data。enctype只能在POST方式下使用。例如：

　　(1) Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以；

　　 (2) Multipart/form-data：上传附件时，必须使用这种编码方式；

2、<input> 标签

　　输入标签（文本框）（重点♥♥♥）

　　用于接收用户输入，例如：<input type="text">

　　（1）type="属性值"

　　　　　　• text（默认）：文本类型；

　　　　　　• submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去；

　　　　　　• password：密码类型；

　　　　　　• radio：单选按钮，名字（name值）相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”）；

　　　　　　• checkbox：多选按钮，名字(name)相同的按钮作为一组进行选择；

　　　　　　• hidden：隐藏框，在表单中包含不希望用户看见的信息；

　　　　　　• reset：重置按钮，清空当前表单的内容，并设置为最初的默认值；

　　　　　　• image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片；

　　　　　　• file：文件选择框；

　　　　　　• button：普通按钮，结合js代码进行使用；

　　　　　　• number：只允许输入数字；

　　（2）name="名称"；

　　　　　　表单的名称，用于JS来操作或控制表单时使用；

　　（3）value="内容"；

　　　　　　文本框里的默认内容（已经被填好了的）；

　　（4）id

　　　　　　表单的名称，用于JS来操作或控制表单时使用；

　　（5）placeholder="提示内容"；

　　　　　　提示的"请输入用户名" 文本代替

　　（6）size="50";

　　　　　　表示文本框内可以显示五十个字符，一个英文或一个中文都算一个字符；

　　（7）readonly　

　　　　　　文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。

用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑；

　　（8）disabled

　　　　　　文本框只读，不能编辑，光标点不进去。属性值可以不写；

　　（9）checked="checked"；也可不写默认等于checked

　　　　　　将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略；非type的属性值。

3、<lable> 标签

　　我们先来看下面一段代码：

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

　　对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。

　　本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。

　　解决方法如下：

<input type="radio" name="sex" id="nan" /> 
<label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> 
<label for="nv">女</label>

　　上方代码中，input元素要有一个id，然后label标签有一个for属性，和id相同，那么这个label和input就有绑定关系了。

4、<select> 下拉列单标签

<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

<select>标签的属性：

- multiple：可以对下拉列表中的选项进行多选。没有属性值。
- size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

<option>标签的属性：

- selected：预选中。没有属性值。

<form>
        <select>
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
            <option>大学</option>
            <option selected="">研究生</option>
        </select>
        <br><br><br>

        <select size="3">
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
            <option>大学</option>
            <option>研究生</option>
        </select>
        <br><br><br>

        <select multiple="">
            <option>小学</option>
            <option>初中</option>
            <option selected="">高中</option>
            <option selected="">大学</option>
            <option>研究生</option>
        </select>
        <br><br><br>

    </form>

效果：

5、<textarea> 标签

　　多行文本输入框，text就是文本，area就是区域

　　属性：

　　　　name：提交给服务器的key值；

　　　　value：提交给服务器的值；

　　　　rows="4"：指定文本区域的行数；

　　　　cols="20"：指定文本区域的列数；

　　　　readonly：只读；

<form>
        <textarea name="txtInfo" rows="4" cols="20">你好你好你好你好你好</textarea>
</form>

posted @ 2018-09-17 09:40 葡萄想柠檬 Views(286) Comments(0) 收藏举报

刷新页面返回顶部

葡萄想柠檬