HTML笔记

最新推荐文章于 2022-09-16 08:46:14 发布

weixin12311

最新推荐文章于 2022-09-16 08:46:14 发布

阅读量62

点赞数

本文链接：https://blog.csdn.net/weixin_43663375/article/details/100070725

版权

HTML基本标签

1.1 结构标签

   <html><html>:根标签
   <head></head>：头标签
    <title></title>:页面的标题
    <body></body>：主体标签：网页内容
   属性：
   color:文本的颜色        <font color="red">内容</font>
   size: 文本的大小        <font size="30">内容</font>
   bgcolor:背景色       <body bgcolor="bisque"> </body>
   background:背景图片   <body background="图片的地址"> </body>

1.2 排版标签

1.注释标签：
    2.换行标签：<br/>
   3.段落标签：<p>文本文字</p>
       特点：段与段之间有行高
       属性：align对齐方式   (left：左对齐 center：居中 right：右对齐)
    4.水平线标签:<hr/>
   属性:
       width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
       size: 水平线的粗细 (像素表示，例如：10px)
       color:水平线的颜色
       align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)

1.3 标题标签

<h1></h1>—-<h6></h6>
随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；

1.4 容器标签

   <div></div>:块级标签，独占一行，换行
    <span></span>:行级标签，所有内容都在同一行
        作用： <div></div>:主要是结合css页面分块布局
       <span></span>:进行友好提示信息

1.5 列表标签

   1.5.1 无序列表 ul
       无序列表标签： <ul></ul>
        属性：type :三个值，分别为 circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
        列表项：<li></li>

   1.5.2 有序列表 ol
       有序列表标签：<ol></ol>
       属性：type：1、A、a、I、i（数字、字母、罗马数字）
        列表项： <li></li>

1.6 图片标签

   <img/> 独立标签
    属性:
       src：图片地址：相对路径（同一个网站）绝对路径 http：//（不同网站）
       width:宽度
       height:高度
       border:边框
       align:对齐方式，代表图片与相邻的文本的相当位置（三个属性：top 顶部对齐 middle 居中 bottom 底部对齐）
        alt:图片的文字说明
       title:图片的悬停显示
       hspace（水平）和 vspace（垂直）设定图片边沿上下左右空白，以免文字或其它图片过于贴近

1.7 链接标签

   <a>文本或图片</a>
   属性：
        href:跳转页面的地址(跳转到外网需要添加协议)
       target:打开的位置：
           (1) _self(在自身窗口中打开,默认)
           (2)_blank(在新窗口中打开，之前页面存在)
           (3)_parent 在父窗口中打开
           (4)_top 在顶部窗口中打开
            (5)_search (任意名字)相等于给页面起一个名字，如果再次打开时，页面存在，则不再打开新的页面
        name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值

1.8 表格标签

表格标签的使用：

?
table：表示表格 tr：表示行 td：表示单元格（列）

table表格的属性（1）border：边框（2）width：宽度（3）height：高度

tr、td的属性（1）align：控制表格内容对齐方式（2）valign：控制表格内容垂直对齐

表格的列合并：colspan   表格的行合并：rowspan

<b> 定义粗体文本 <big> 定义大号字 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong> 定义加重语气 <sub> 定义下标字 <sup> 定义上标字
<ins> 定义插入字 <del> 定义删除字

HTML表单标签

1.1 form标签

   常用属性：action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
        method:请求方式：get 和post
        enctype:表示是表单提交的类型
           默认值：application/x-www-form-urlencoded 普通表单
           multipart/form-data 多部分表单(一般用于文件上传)
           text/plain 普通文本

   get:
      1.数据存在地址栏中,请求参数都在地址后拼接 path?name=张三&password=123456
      2.不安全
      3.效率高
      4.get请求大小有限制，不同浏览器有不同，但是大约是2KB
       使用情况：一般情况用于查询数据。

   post：
      1.地址栏没有数据：请求参数单独处理。
      2.安全可靠
      3.效率低
      4.post请求大小理论上无限。
       使用情况：一般用于插入修改等操作

1.2 input标签

type: 以下为type可能要取的值：
   1.1 text 文本框输入内容
   1.2 password 密码框密文或者掩码
   1.3 radio 表示是单选，name必须一致；value：提交给服务器的数据
   表示同一组中只能选中一个( checked ="checked" 表示选中)
   1.4 checkbox 表示多选，name必须一致，
   表示同一组中可以选多个，返回值是个数组( checked ="checked" 表示选中)
   1.5 file ：表示上传控件
       以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根据name来取)
      以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
   1.6 submit 提交
   1.7 reset 重置
   1.9 image 图片提交按钮
   1.10 button 普通按钮
   1.11 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
   1.12 email 表示邮箱格式的数据

   name属性：表单元素名字，只有name属性才能提交给服务器。
   value属性：提交给服务器的数据
   placeholder：提示信息
   高级属性：
       disabled:禁用
       readonly:只读

1.3 select元素：

下拉列表
属性multiple="multiple"表示多选、size表示显示的个数，selected="selected"表示选中该项

1.4 textarea元素：

文本域
<textarea cols="100" rows="5"> 表示5行100列的区域可以输入内容，该元素没有value属性

HTML框架标签

   通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，每个框架都独立于其他框架
   使用框架的缺点：
       开发人员必须同时跟踪更多的HTML文档
       很难打印整张页面

1.1 frameset

框架结构标签，把body删掉，使用framset代替body

   框架结构标签（<frameset>）定义如何将窗口分割为框架
   每个 frameset 定义了一系列行或列
   rows(水平分割)/columns 的值规定了每行或每列占据屏幕的面积

1.2 frame
框架标签

frame 标签定义了放置在每个框架中的 HTML 文档

   基本的注意事项
   1. 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
   2. 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：   noresize="noresize
   3.frameset的属性 frameborder="1|0|yes|no" 表示是否有边框 border="1" 表示边框的粗细 bordercolor表示边框颜色