HTML基本标签

最新推荐文章于 2021-08-03 16:57:30 发布

ldh_lyf

最新推荐文章于 2021-08-03 16:57:30 发布

阅读量132

点赞数

分类专栏： JS/HTML

本文链接：https://blog.csdn.net/lyf_ldh/article/details/80893189

版权

JS/HTML 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

html注释标签<-- -->

A、标题标签
               <h1>标题1</h1>
               ...
               <h6>标题</h6>
              特点：加粗
                  依次变小，默认换行
B、水平线
              <hr />
              特点：没有内容体
              拓展：width ---- 宽度
                   取值：
                       方式1：像素为单位（建议，为了养成良好的编码习惯）
                           100px
                       方式2:可以不使用 px 单位
                       方式3：使用百分比
                 size ----- 粗细
                    取值：
                        方式1：像素为单位
                        方式2：不加单位
                        注意：不能使用百分比
                记住：在 html 中设置横向的尺寸，可以使用百分比
                           但是如果是纵向尺寸，不建议使用百分比，相当一部分情况都无效
C、字体设置
              <font></font> 设置字体
               color = "颜色" ----- 设置字体显示颜色
               size = "1-7的值" --- 设置字体大小，1-7 依次变大
              拓展：
               color 属性拓展：
                   三原色 ---- 红绿蓝
                       255 255 255
                   不同的比例勾兑，可以显现出不同的颜色 ---- 256 *　256 * 256 种
               size = 严格在 1-7 之内取值
D、加粗    ---- <b></b>
              斜体 -------- <i></i>
              二者可以嵌套使用
E、<p></p> 段落标签
F、<br /> 换行
           和 p 标签的区别，前者换行之后，有空行，但是 br 没有，只是换行
           拓展：关于空格(源码中的代码书写样式，不会体现在页面中)
              源码中多个空格，在页面中就体现一个

  ---- 代表空格

图片标签：<img src="../../img/bd_logo1.png" width="30%" height="100%" title="百度logo" alt="图片资源不存在"/>

设置图片的高度和宽度：
              width
              height
              注意：height 不能使用百分比
           拓展属性：
              title --- 鼠标移入可以显示友好的提示信息
              alt ----- 图片资源不存在时，显示的文本
          图片路径问题（重点）
              ../ ---- > 返回上一级目录
              有多少个 ../ 就是返回多少级

没有的化，就是在当前目录找

列表标签：

            <ol>
               <li>记录1</li>
               <li>记录2</li>
               <li>记录3</li>
           </ol>

           <ul>
               <li>记录1</li>
               <li>记录2</li>
               <li>记录3</li>
           </ul>

           ol ---- ordered list ---- 有序列表
           ul ---- unordered list -- 无序列表
           li ---- list item ------- 列表条目

           拓展：
           设置列表的 type 属性：可以设置前面提示的类型
           ol type 值：
              1 ---- 阿拉伯数字排序
              A ---- 大写英文字符排序
              a ---- 小写英文字符排序
              i ---- 小写罗马数字排序
              I ---- 大写罗马数字排序

           ul type 值：
              circle ---- 空心圆

disc ------ 实心圆

square ---- 实心方块

超链接：

标签是 <a></a>
           使用语法：
           A、必须要有内容体
           B、必须设置 href 属性，是要跳转到的页面的路径
           C、外网的路径
               http://www.xxxxx.com
                   内部自己的页面，不需要 http,注意层级关系

           常用的属性：
           target = "_balnk" ---- > 在新的选项卡开启页面

默认是新页面覆盖旧页面，默认设置: target="_self"

_parent 在父窗口打开，_top在整个浏览器打开

设置超链接的下划线隐藏 text-decoration: none;

表格：
           <table>
              <tr>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>
              <tr>

              </tr>

           </table>

表格优化

1）、显示优化

设置背景色
bgcolor = "颜色"

                边框 ---- 默认没有边框
                border ---- 像素数，设置边框粗细
                实心边框

cellpadding="0px" cellspacing="0px"

cellpadding --- 单元格内容与单元格边框的间距
cellspacing ---- 单元格之间的间距

                设置宽度
                width --- 和图片以及 hr 一样
                设置高度
                height --- 和图片以及 hr 一样

             2）、内容优化
                                        表头设置
                   th ----- 加粗居中
                                        对齐方式
                   align = "对齐方式"
                 td 可以使用 ---- 当前单元格内容居中
                 tr 可以使用 ---- 当前行的所有单元格居中

table 可以使用 - 设置表格本身在 body 中的对齐方式，不是设置单元格对齐方式

               跨行时是由 rowspan = "跨地行数"
               跨列时是 colspan = "跨地列数"
               跨行和跨列可以复合使用

表单

A、实现表单界面
               <form> </form> ----- 代表表单
                   内容体：输入项，可以让客户录入数据
                   注意：输入项中有一个比较重要的属性 ---- name
                              设置数据传递时的键的，一旦指定不能修改

           B、如何指定服务器路径
              form 表单中使用属性：action = "服务器路径"

           C、提交方式问题
              1、为了安全，一般使用 post 方式提交: method="post"
               post 提交，可以提交大的数据量
              2、不指定，默认使用 get 方式提交，提交的信息显示在地址栏，不安全
                Get 提交，数据量有限

            录入元素分类：
           1、文本输入框
           2、密码输入框
           3、单选按钮
           4、复选按钮
           5、下拉列表
           6、文本域
           7、文件上传

提交按钮

重置按钮

                1、单选按钮实现互斥，存入相同的按钮组,指定相同的 name
               2、单选按钮选定时，直接提交单服务器，对应的值是 on,怎么解？
                      要设置单选按钮的属性 value 来指定应该提交的值
               3、复选按钮提交数据问题以及解决，和单选按钮一样
               4、设置被默认选中:
                   checked 属性,取值:"checked"
                       应该设置的值是 true 或 false，但是 HTML设计的时候，取值是字符串
               5、下拉列表
                  建议：每一个 option 都设置 value 值
                  注意：设置选定项 --- 属性:selected --- selected

设置多选下拉列表 ---- mutiple = mutiple

           1、value 值的作用
               A、可以用于指定单选按钮复选按钮或下拉列表选定的选项对应的值
               B、可以用于输入项的数据回显
               C、当在输入项(文本框密码框录入数据时其实就是在为 value 这个属性赋值)

           2、有些数据回显时，不能修改，怎么设置？
              readonly="readonly" ---- 只读
              disabled="disabled" ---- 不可用
               效果一样，但是有区别：
               disabled 不会将数据提交到服务器
               readonly 数据还会提交到服务器

           3、场景：
                A、修改用户信息时，可以根据账号修改，但是效率可能低，因为底层实现，要遍历表使用账号逐一比较
                B、因此，我们建议使用 id 作为数据修改的筛选条件，因为 id 可以计算索引，有了索引可以对数据进行直接定位
                            效率更高

                我们以后常见操作：
                A、页面回显数据时，也要回显 id,修改完成时，id也跟着提交，那么后台组织 sql 语句，以ID 作为筛选条件
                            效率更高
                B、id 对于程序比较重要，却没必要给客户看
                            可以将id 存储进 hidden 标签，那么这个属性就不再显示了，但是却又会提交