HTML(三)

排版标签详述

p

段落标签<p> </p> 块级标签，独占一行；文本级标签，内部不可以嵌套块级标签

段落：是英文paragraph的缩写。

属性：

align='属性值'：对齐方式。属性值包括：left、center、right

代码示例：

 <p>这是一个段落</p>
 <p align="center">这是另一个段落</p>

上文已经介绍过，HTML标签是分等级的。HTML将所有的标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。

从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

错误写法：（把h系列的标签放到p里）

 # 错误示例，请注意
 <p>
    我是个段落
    <h2>我是二级标题</h2>
 </p>

div

<div> </div>什么效果都没有的块级标签

div和span是非常重要的标签，div的语义是division“分割”； CSS中应用非常多。　　

div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。

div标签的属性：

align="属性值"：设置块儿的位置。属性值可选择：left、right、 center

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

示例：

    <div>
        导航栏
    </div>
    <div>
        中心banner
    </div>

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

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

 <div class="header">
    <div class="logo"></div>
        <div class="nav"></div>
    </div>
    <div class="content">
        <div class="guanggao"></div>
        <div class="shop"></div>
    </div>
 <div class="footer"></div>
 
 # div标签负责布局，负责结构，负责分块。css负责样式

hr

<hr> 单闭合标签

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

代码示例：

  <p>德玛西亚</p>
    <hr>
    <hr>

内容居中标签

<center>

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

示例：

 <center>
        <p>德玛西亚</p>
 </center>

预定义（预格式化）

标签：<pre>

含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）说明：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

所有的浏览器默认情况下都会忽略空格和空行，而pre可以保留你写入标签内容的格式。

示例：

 <pre>
        鹅鹅鹅
 
            作者：李白
        曲项向天歌
        白毛浮绿水
         
 </pre>

表格table

表格标签用<table>表示。一个表格<table>是由表头<thead>和表格内容<tbody>组成的。

其中的每一行又是由<tr>组成的，每行中的每一格是由<td>组成的。在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。

 标准表格:thead tbody的内容
  tr表示每一行
  th表示thead中的每一个元素
  td表示tbody中的每一个元素
  
 <div align="center" >
    <ol type="1">
        <li>诡术妖姬</li>
        <li>乐芙兰</li>
        <li>（妖姬）</li>
    </ol>
 </div>
 <hr>
 <div align="center">
    <ul type="none">
        <li>众星之子</li>
        <li>索拉卡</li>
        <li>奶妈</li>
    </ul>
 </div>
 <hr>
 <div align="center" >
    <dl>
    <dt>大天使</dt>
        <dd>审判天使</dd>
        <dd>太阳女神</dd>
        <dd>月光女神</dd>
    </dl>
    <dl>
    <dt>大使</dt>
        <dd>钢铁大师</dd>
        <dd>金属大师</dd>
        <dd>战争女神</dd>
    </dl>
 </div>

不写thead只写tbody 就没有表头样式
 
 <table border="1" align="center" cellpadding="10px" cellspacing="5px" >
    <thead>
    <tr>
        <th>战士</th>
        <th>辅助</th>
        <th>射手</th>
        <th>法师</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>盖伦</td>
        <td>索拉卡</td>
        <td>女警</td>
        <td>莫甘娜</td>
    </tr>
    <tr>
        <td>赵信</td>
        <td>琴女</td>
        <td>薇恩</td>
        <td>拉克丝</td>
    </tr>
    </tbody>
 </table>

<table>的属性：

border：边框。像素为单位。 style="border-collapse:collapse;"：单元格的线和表格的边框线合并 width：宽度。像素为单位。 height：高度。像素为单位。 bordercolor：表格的边框颜色。 align：表格的水平对齐方式。属性值可以填：left right center。注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置） cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。 cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0 bgcolor="#99cc66"：表格的背景颜色。 background="路径src/..."：背景图片。背景图片的优先级大于背景颜色。

行

<tr> 一个表格就是一行一行组成。 属性：

dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
bgcolor：设置这一行的单元格的背景色。注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
height：一行的高度
align="center"：一行的内容水平居中显示，取值：left、center、right
valign="center"：一行的内容垂直居中，取值：top、middle、bottom

单元格

<td>

属性：

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

单元格的合并

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

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

效果：（横向合并）

<th>：加粗的单元格。相当于<td> + <b>

属性同<td>标签

<caption>：表格的标题。使用时和tr标签并列

表格的标签

<thead>标签

<tbody>标签

<tfoot>标签

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

1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

Form表单

<form>

用于用户输入创建HTML表单

属性：

input元素，'type'属性包括包含文本域text、密码域password、复选框checkbox、单选按钮radio，提交按钮submit，重置按钮reset，普通按钮button；
表单还可以包含下拉列表select、文本域textarea、fieldset、legend 和 label 元素等等。

form : 表单标签
  action : 提交到的地址,把表单中的数据提交到对应的地址上
 input :
  type种类:text,password,radio,checkbox,submit
    name\value :把数据提交到后台的,提交的是input标签的name值和value值
    对于选择框 : checked属性表示默认选中
    readonly :对于输入框的禁止修改 可以提交
    disabled :对于所有元素不能修改 也不能提交
 button :
  input的submit类型和button放在form表单中都表示提交
 <form action="http://127.0.0.1:8088">
    <!--普通的text文本域，网页跟服务器交互时，是以key:value的模式，name传的是key,value传的是值-->
    <input type="text" />
    <br><br>
    <!--带有姓名的文本域，注意label中的for要直到对应的text的id，指向id的好处是点击‘姓名’时，就可以把鼠标定位到text框内-->
    <label for="user" >姓名:</label>
    <input type="text" name="username" id="user" value="Aries" /> <!--value是定义默认输入值-->
    <br><br>
    <label >姓名:</label>
    <input type="text" value="Aries"  disabled="disabled" /><!--disabled是保证输入框内的内容不能进行修改，可以简写成disabled-->
    <br><br>
    <label  >姓名:</label>
    <input type="text" placeholder="请输入用户名"/> <!--placeholder是定义窗内提示语-->
    <br><br>
    <label for="pwd">密码:</label>
    <!--password框，输入的数据会以 · 代替，以保护密码安全-->
    <input type="password"  name='password'  id="pwd"  placeholder="请输入密码" />
    <br><br>
    <!--name的属性是把多个radio拉到一个组内，实现单选功能,checked是默认选项-->
    <input type="radio" name="sex" value="1" checked/>男
    <input type="radio" name="sex" value="2" />女
    <br><br>
    <!--name的属性是把多个checkbox拉到一个组内，实现多选功能,checked是默认选项,也可以使用disabled锁定选项-->
    <input type="checkbox" name="hobby" value="a" checked> 游泳
    <input type="checkbox" name="hobby" value="b" checked disabled> 电影
    <input type="checkbox" name="hobby" value="c" > 音乐
    <br><br>
    <!--size设定显示块大小，selected默认选择，multiple实现多选-->
    <select name="city" id="a" size="3">
        <option value="1" selected>深圳</option>
        <option value="2" >上海</option>
        <option value="3" >北京</option>
    </select>
    <br><br>
    <select name="course" id="b" size="3" multiple>
        <option value="1" >LINUX</option>
        <option value="2" >GO</option>
        <option value="3" >PYTHON</option>
        <option value="4" >WEB</option>
    </select>
    <br><br>
    <!--input的submit类型和button放在form表单中都表示提交-->
    <input type="submit" value="表单按钮">
    <button>提交按钮</button>
    <br><br>
    <!--普通按钮并没有提交事务的作用-->
    <input type="button" value="普通按钮">
 
 </form>
 <br><br>
 <!--注意:如果submit和button放在外面,就变成了普通的按钮-->
 <input type="submit" value="表单按钮">
 <br><br>
 <button>提交按钮</button>
 input的其他type:
 
 reset hidden button file date
 注意: 如果是file类型的input标签需要修改表单的enctype类型Multipart/form-data
 
 <form>
  <input type="hidden">
  <input type="reset">  
  <input type="button" value="普通按钮">
  <input type="file">
  <input type="date">
 </form>
 
 文本框:
 <textarea name="" id="" cols="30" rows="10"></textarea>

html颜色表示

颜色表示

纯单词表示：red、green、blue、orange、gray等
10进制表示：rgb(255,0,0)
16进制表示：#FF0000、#0000FF、#00FF00等

RGB色彩模式

自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。
RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青
在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。

html中的特殊字符

 ：空格（non-breaking spacing，不断打空格）
<：小于号（less than）
>：大于号（greater than）
&：符号&
"：双引号
'：单引号
©：版权©
™：商标™

常用的特殊字符：、<、>、&copy

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

 这是一个HTML语言的&lt;p&gt;标签

HTML的特殊字符

回到顶部

posted @ 2019-08-12 21:29 Aries-X 阅读(126) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Aries_X