HTML基本标签，表格标签，框架标签

1、html简介

1.1什么是html

html全称：Hyper Text Markup Language(超文本标记语言)

备注：
          a.超文本:页面内可以包含图片、链接，甚至音乐、程序等非文字元素
          b.标记:标签，不同的标签实现不同的功能
          c.语言:人与计算机的交互工具
2、html基本标签

2.1结构标签（文件标签）

<html><html>:根标签
    <head>
    <title></title>:页面的标题
    </head>
    <body></body>：内容

属性：
    text:文本的颜色
    bgcolor:背景色
    background:背景图片
颜色的表示方式：
    第一种方式：red green blue
    第二种方式：#000000 #ffffff #325687   #377405

2.2排版标签

2.2.1.注释标签：
    2.2.2.换行标签：<br/>
    2.2.3.段落标签：<p>文本文字</p>
          特点：段与段之间有空行
          属性：align对齐方式   (left    center right)
    2.2.4.水平线标签:<hr/>
          属性:
              width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)

size: 水平线的粗细 (像素表示，例如：10px)
              color:水平线的颜色
              align:水平线的对齐方式

2.4文字标签（标题标签）

2.4.1基本文字标签

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

2.4.2标题标签

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

2.5.1无序列表ul（***）

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

   示例如下：
        <ul type="square">无序列表
           <li>苹果</li>
           <li>香蕉</li>
           <li>橘子</li>
       </ul>

显示效果：

2.5.2有序列表ol（***）

有序列表标签：<ol></ol>
             属性：type：1、A、a、I、i（数字、字母、罗马数字）
             列表项： <li></li>
      示例如下：
        <ol type="I">有序列表
           <li>苹果</li>
           <li>香蕉</li>
           <li>橘子</li>
       </ol>

2.5.3列表嵌套

2.6图形标签

<img/>自关闭标签
属性:
      src：图形地址
      width:宽度
      height:高度
      border:边框
      align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
      alt:图片的文字说明
      hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近

2.7链接标签

<a></a>
属性：
href:跳转页面的地址(跳转到外网需要添加协议)；
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值 target:_self(自己) _blank(新页面，之前页面存在) 默认_self

2.8 表格标签

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2.8.1普通表格（table,tr,td）

<table border="1" bordercolor="red" cellspacing="0" align="center">
           <tr>
               <td>学号</td>
               <td>姓名</td>
           </tr>
           <tr>
               <td>1</td>
               <td>aa</td>
           </tr>
       </table>

2.8.2表格的表头

2.8.3表格的列合并（colspan）****

显示效果

2.8.4表格的行合并（rowspan）****

显示效果:

2.9文本格式化标签

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

3.1from元素

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

面试：get请求和post请求的区别？（*****）

get:
       1.地址栏,请求参数都在地址后拼接 path?name="张三"&password="123456"
       2.不安全
       3.效率高
       4.get请求大小有限制，不同浏览器有不同，但是大约是2KB
使用情况：一般情况用于查询数据。
   post：
       1.地址栏：请求参数单独处理。
       2.安全可靠些
       3.效率低
       4.post请求大小理论上无限。
使用情况：一般用于插入删除修改等操作

4.1.1 input元素

type: 以下为type可能要取的值：
      1.1   text 普通文本
      1.2   password 密码框   密文或者掩码
      1.3   radio 表示是单选，name必须一致，
                  表示同一组中只能选中一个( 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   图片按钮
以上所有input的属性： width 设置宽度，height 设置高度 border 设置边框、
     1.10 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)

4.1.2 select元素（下拉列表）

4.1.3 textarea元素（文本域）

需要指定输入的区域位置大小

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

4、html基本标签的综合案例

注册源码：

<body style="background:mediumseagreen;" >

       <form action="" method="get">
          <table align="center">
              <h3>注册</h3>
              <tr>
                  <td align="right">用户名：</td>
                  <td><input type="text" name="username" /></td>
              </tr>
              <tr>
                  <td align="right">密码：</td>
                  <td><input type="password" name="password" id="password" ></td>
              </tr>
              <tr>
                  <td align="right">确认密码:</td>
                  <td>
                      <input type="password" name="conf" />
                  </td>
              </tr>
              <tr>
                  <td align="right">性别：</td>
                  <td>
                      <input type="radio" name="sex" value="男" />男
                      <input type="radio" name="sex" value="女" checked="checked"/>女
                  </td>
              </tr>
              <tr>
                  <td align="right">爱好：</td>
                  <td>
                  <input type="checkbox" name="happy" value="digdate" checked="checked" />大数据
                  <input type="checkbox" name="happy" value="mysql"/>数据库
                  <input type="checkbox" name="happy" value="physon" />physon
                  <input type="checkbox" name="happy" value="java" />java
                  </td>
              </tr>
              <tr>
                  <td align="right">地址:</td>
                  <td>
                      <select name="city">
                          <option value="北京">北京</option>
                          <option value="上海">上海</option>
                          <option value="河南" selected="selected">河南</option>
                      </select>
                  </td>
              </tr>
              <tr>
                  <td align="right">个人介绍</td>
                  <td>
                      <textarea cols="100" row="5"></textarea>
                  </td>
              </tr>
              <tr>
                  <td></td>
                  <td align="center">
                  <input type="submit" value="注册" />
                  <input type="reset" value="重置"/>
                  </td>
              </tr>
          </table>
       </form>
   </body>
5、html的框架标签frameset

5.1框架结构标签frameset

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

5.2框架标签frame

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

5.3基本的注意事项

1. 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
2. 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

5.4效果图及源码展示

5.4.1源代码：

<frameset rows="200,*" border="10px" bordercolor="yellow">
       <frame src="top.html" scrolling="yes" noresize="noresize" />
       <frameset cols="200,*">
           <frame src="left.html" scrolling="yes" noresize="noresize" />
           <frame src="right.html" name="content" scrolling="yes" />
       </frameset>
   </frameset>

显示效果：

6、html的其它标签和特殊字符

6.1其他标签

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
       
       <meta http-equiv="description" content="this is my page">
       
       <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
       <link rel="stylesheet" type="text/css" href="./styles.css">
       
       <script type="text/javascript" src=""></script>

6.2 特殊字符

HTML基本标签，表格标签，框架标签的更多相关文章

第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]
第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...
form表单以及内嵌框架标签
今关于今天所学习的东西又复杂又简单,上午学习了form表单,也是挺简单的:搭配table表格使用也是非常熟练. 下午讲了讲给网页内嵌框架标签以及在内嵌框架标签中添加其他的网页:还有在内嵌框架标签中添加 ...
javaweb之框架标签(day1 框架标签的使用)
框架标签 <frameset> --rows:按照行进行划分<frameset rows='80,*'> --rows:按照列进行划分<frameset cols='80 ...
HTML框架标签
与HTML框架有关的标签主要有三种: <frameset>框架结构标签 <frame>框架标签 <iframe>内联框架标签一. 先来说第一种框架结构标签 < ...
HTML5入门（一）—— 基本标签&表格
一.HTML简介超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML Head部分 <1>Head的作用用于描述网页的一些关键信息.比如网页的 ...
html中的div span和frameset框架标签
Div和span 1. div独占一层,由div九不允许有别的. 2. span标签不是独自占用一行,span一般用来设置字体. 框架标签: 什么是框架标签,就是把一个页面分成很多 ...
Javaweb学习笔记——（十三）——————JSTL、JSTL核心标签库、自定义标签、有标签体的标签、带有属性的标签、MVC、Javaweb三层框架
JSTLApache提供的标签库 jar包:jstl-1.2.jar,如果传MyEclipse,他会在我们导入jar包,无需自己导入,如果没有使用MyEclipse那么需要自行导入.--------- ...
3.html基础标签:表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

随机推荐

HTTP接口抓包工具之Fiddler
Fiddler的基本功能介绍: Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据,Fiddler包含了 ...
自动贩卖机VS无人门店：谁是真正的零售新风口？
原本在线上不断发力,让实体店几乎凋敝的电商,却忽然对线下兴趣大增.阿里疯狂入股.收购线下商超:京东要在全国范围内开设百万家便利店,仅在农村就将开设50万家--这一股浪潮,或将直接改变整个百货零售 ...
Ansible(一) Try it - 枯鱼的博客
学习ansible的最好方式就是使用,先别管什么inventory,playbook,module这些.按照安装文档安装,然后try it,一边学一边体验,这样的速度是最快的.当熟悉了之后,想要深入就 ...
docker学习读书笔记-一期-整理
0.Docker - 第零章:前言 1.Docker - 第一章:Docker简介 2.Docker - 第二章:第一个Docker应用 3.Docker - 第三章:Docker常用命令 4.Doc ...
OpenCV使用：加载图片时报错 0x00007FFC1084A839 处(位于 test1.exe 中)有未经处理的异常: Microsoft C++ 异常: cv::Exception，位于内存位置 0x00000026ABAFF1A8 处。
加载图片代码为: #include<iostream> #include <opencv2/core/core.hpp> #include <opencv2/highgu ...
Vue组件传递数据
组件命名 1.字母全小写且必须包含一个连字符 my-componnect 2.使用 kebab-case(短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例 ...
python xlwings Excel 内容截图
import xlwings as xw from PIL import ImageGrab def excel_save_img(path, sheet=0, img_name="1&qu ...
8421BCD转余3码Verilog HDL的设计(1)
近期阅读Verilog HDL高级数字设计(第二版)中,遇到了串行比特流BCD码转余3码转换器的设计,比较独特的是: (1)该转换器的输入为1位串行比特流,输出也为1位串行比特流. BCD码与余三码的 ...
移动端轮播图实现方法（dGun.js）
本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...
HTTP协议详解（深入理解）
版权声明:本文为CSDN博主「有抱负的小狮子」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/weixin_ ...

HTML基本标签，表格标签，框架标签

2.8 表格标签

HTML基本标签，表格标签，框架标签的更多相关文章

随机推荐

热门专题