好好学Web前端技术之HTML标签

  • 不要有强迫症

标签中为

这是说明文档类型为 HTML

注释


meta标签


  • 属性分为以下两组
  • name 与 content
    – 描述网页



  • 值 discription 用于描述。使用content属性提供网页简短描述
  • 值 keywords 用于定义网页关键字。使用content属性提供网页的关键字
  • 值 robots 用于定义网页搜索引擎方式。使用content属性描述网页搜索引擎方式


  • http-equiv 与 content
    – 提供HTTP协议的响应报文头(MIME 文档头)，以名称/值的形式表示



  • content-type:用于定义用户浏览器或相关设备如何显示要加载的数据，
    或者如何处理将要加载的数据
  • refresh:用于刷新或跳转(重定向)页面。
    使用content属性表示刷新或跳转的开始时间与跳转的网址
  • expires:用于网页缓存过期时间。
    使用content属性表示页面缓存的过期时间。一旦网页过期，将从服务器上重新下载新页面
  • pragma与no-cache:用于定义缓存页面。
    使用content属性的no-cache表示是否缓存网页


示例：

通过实现页面的自动跳转来演示标签的使用


创建一个Meta.html的页面(前提有一个helloworld.html页面)

-->

h1-h6 标题标签

h1最大，h6最小


  • 特点：自动换行，并且上下留白
  • 属性：align用于设置标题的对齐方式,取值left左对齐(默认),right右对齐,center居中对齐

font字体标签


  • size属性：字体大小(即字号)，只有1~7，最大是7，再大就得用css选择器实现
  • face属性：表示设置字体类型：（宋体、楷体、微软雅黑）
  • color属性：字体颜色
    – a. 英文单词颜色名字，格式
    – b. #RGB（三原色红绿蓝），


取值 00-ff 十六进制
比如：纯红 #ff0000, 纯绿 #00ff00, 纯蓝 #0000ff


  • 借助屏幕取色器取色


注：默认字体颜色黑色


字符标签

格式化标签


  • b加粗粗体
  • i倾斜斜体
  • 既加粗又倾斜
  • u对文体加下划线
  • strong对文本加强效果，相当于粗体
  • big在当前文字大小的基础再增大一级
  • small在当前文字大小的基础再减小一级
  • sup上标
  • sub下标
  • em强调文本，通常以斜体显示

用于显示转义字符的字符实体


  • 空格 & nbsp;
  • 大于号(>) & gt;
  • 小于号(<) & lt;
  • 引号(") & quot;
  • 版权号 & copy;

分隔标签

换行标签

  • 段落标签：为文字分段落

– 特点：自动换行，上下留白;

上下有一定的空间

  • br换行标签

文字分隔标签


  • 强制换行
  • 强制分段




分割线标签

hr水平线标签


  • 属性size: 水平线的高度 粗细 可以1px
  • 属性noshade: 设置纯色效果，设置hr的阴影，如果不要阴影只要将noshade加入即可
  • 属性width: 设置宽度，线上下间隔
  • 属性color: 设置显示的颜色
  • 属性align: 分割线的对齐方式，left左对齐, right右对齐, center居中对齐

案例1

  • 加红加粗倾斜效果
    – 案例1

列表标签


  • ​ol有序列表​
  • ​ul无序列表​
  • ol每一个列表项li都有一个序号
  • ul每一个列表项li都是一样的图案


ol和ul有一个共同属性，




type属性：设置有序列表的序号和无序列表的图案
– ol的type属性取值 1(默认的),A,I,a,i
– ul的type属性取值 circle空心圆圈,disc实心圆点(默认的),square实心正方形



还有 dl自定义列表和嵌套列表



超链接标签


  • a标签
  • href属性:被点击后跳转到哪一个网页
  • target属性:指的是跳转后的目标文件的打开位置
  • 可以取值:
    – _self, 在当前窗口中打开目标文件，只是target的默认值，
    – _blank, 在一个空白的新窗口打开目标文件
    – _top,在顶层框架中打开网页，同一个页面。
    这个目标使得文档载入包含这个超链接的窗口，
    用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
    – _parent,在当前框架中的上一层框架打开网页，父和子两个页面有关系的。
    这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。
    如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
    – framename, 在指定的框架内打开被链接文档。


可以跳到网站,或者直接跳转本地路径的网页html文件


图片标签img

  • 属性src：图片路径
    – 1.绝对路径 https://www.baidu.com/logo.png
    – 2.相对路径：相对本文件所在的文件夹
    — 有两种路径格式：


a. ./表示本文件夹
b. …/上一层文件夹



  • 属性width:图片宽度，可以使用像素，也可以百分比；缺省则显示图片原始宽度
  • 属性height:图片高度，可以使用像素，也可以百分比；缺省则显示图片原始高度
    – 不要同时设置宽度和高度都使用百分比，因为图片会等比例放大或者缩小
  • 属性atl：图片显示有问题的代替文本
  • 属性align：设置图片的垂直对齐方式(居上中下)和水平对齐方式(居左中右)
  • 属性title：鼠标移动到图片上面时显示的文字

案例2


  • ​图片轮播图 – ​img​
  • 设置一个定时器

函数可以这么定义：


  • function 函数名(参数){函数体};
    – 调用：函数名(实际参数);
  • 也可以用匿名函数(不推荐)
    var fun1 = function(参数){函数体};
    – 调用 fun1(实际参数);

定时器：

  • 格式：
    – window对象是DOM中的内置对象，这个对象又称为全局对象
    – window.setInterval(code.millisec);
    — code:代码段


a.“正常js代码”


> b.函数名
  • 代表：
    – 设置一个定时器，这个定时器每隔millisec毫秒会触发一次，每次都会执行code代码段
    – window对象可以不写，直接调用setInterval方法也可以，但是建议不写

页面加载事件：


  • window.onload事件，当页面加载完毕之后才会触发
  • 给页面加载事件绑定函数：


方式一:



  • window.onload = 函数名;
  • function 函数名(){}
    ​不推荐使用​


方式二:


  • window.onload = function(){ // 匿名函数
    设置定时器
    }
    ​使用window.onload事件，是为了防止页面没加载完毕就触发事件​

表格标签table


  • table定义表格
  • caption定义表格标题
  • th定义表格的头，自动加黑加粗
  • tr定义表格的一行
  • td定义表格单元，包含在tr标签中
  • thead定义表格的表头
  • tbody定义表格的主体
  • tfoot定义表格的页脚（脚注）
  • col定义用于定义表格列的属性，只能在表格或colgroup标签中使用此标签
  • colgroup定义表格列的分组，此标签只能用在table标签的内部。

表格属性设置

​table标签的属性：​


  • border:表格边框的高度，单位px像素,默认是0，不显示
  • bgcolor:表格背景颜色rgb(x,x,x),#xxxxxx,colorname；不赞成使用,请使用样式代替。
  • background:设置表格背景图片
  • width:表格的宽度，像素px或百分比(按比例占整个)
  • height:表格的高度，像素px或百分比(按比例占整个)
  • align:水平对齐方式有：左对齐left,右对齐right,居中对齐center;不赞成使用,请使用样式代替。
  • cellpadding:单元边沿(边框)与其内容之间的空白。
  • cellspacing:规定单元格之间的空白。


td合并单元格属性



  • colspan:单元格水平合并，值为合并的单元格的数目；表示跨几行
  • rowspan:单元格垂直合并，值为合并的单元格的数目；表示跨几列


align属性用在table上表示整个表格的对齐方式

用在tr上表示行中所有单元格内容的对齐方式

用在td上表示某一个单元格内容的对齐方式


表单

​表单form不是表格​

表单标签

- action:指定处理表单中用户输入数据的提交目标URL - method:指定向服务器传递数据的HTTP方法，主要有GET和POST方法，默认是GET。 -- 注意：当只为取得和显示少量数据时可以使用GET方法, -- 一旦涉及数据的保存和更新，即大量的数据传输时则应当使用POST方法。 - enctype:指定数据发送时的编码类型。 - target:用于指定在浏览器中哪个框架中显示服务器的响应HTML，默认是当前框架。此属性很少使用。 - onsubmit和onreset:指定提交和重置事件触发时运行的js。 - accept和accept-charset:分别用来指定服务器程序接收的MIME类型和字符编码。

表单域




  • 文本框(单行)



  • 多行文本框
    –



  • 密码框(特殊文本域)
    –



密码框并不能保证安全，仅仅使得周围人看不见输入的内容，在传输过程中还是以明文传输，
为保证安全可采用数据加密技术


  • 隐藏域


是用来收集或发送信息的不可见元素，网页的访问者无法看到隐藏域，但是当表单被提交时，隐藏域的内容同样会被提交
–





  • 复选框



  • 单选按钮



  • 文件上传框



  • 下拉选择框
表示本选项被选中 ...


表单按钮




  • 提交按钮
    –
    – value值可以在页面显示出来



  • 复位按钮



  • 普通按钮
    –
    – onclick:通过指定脚本函数来定义按钮的行为，就是js事件


框架(frame)

框架集(frameset)


  • frameset属性
    – cols:用“像素数”或百分比分隔左右窗口，其中“​”表示剩余部分
    – rows:用“像素数”或百分比分隔上下窗口，其中“    ​”表示剩余部分
    – frameborder:设置框架的边框，其值只有0和1。0表示没有边框，1表示显示边框，边框是无法调整粗细的
    – framespacing:表示框架与框架之间的空白距离
  • frame属性
    – bordercolor:设置边框颜色
    – border:设置边框粗细
    – name:框架的名字，在设置超链接时用其作为框架的标记
    – scrolling:设置是否显示滚动条，yes表示显示，no表示不显示，auto则是根据实际情况自动调整
    – noresize:如果设置了noresize属性，那么框架的大小是固定的，如果不设置此属性，则框架大小可用鼠标进行调整
    – marginwidth:设置内容与窗口左右边缘的距离，默认为1
    – marginheight:设置内容与窗口上下边缘的距离，默认为1
    – width/height:框架的宽度及高度，默认为width=“100”,height=“100”
    – align:对齐方式，可选值为: left左,right右,top顶部,middle中间,bottom底部