HTML 标签语言

概念

　　 超文本标记语言， 是一种用于创建网页的标记语言

ps：

　　不是编程语言

　　利用标签来描述网页

　　扩展名：.html .htm

语法规范

  • 标签不区分大小写, 推荐小写
  • 双标签必须写完整  ( 浏览器不会报错的, 而且自动补全但是最终效果很大可能性影响整体布局 )
  • 不用标签的形式的内容会被完整的原内容进行展示
  • 合理的注释  " <!-- 注释内容 --> " 和锁紧增加代码的可读性

文档结构

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>css样式优先级</title>

</head>

<body>

</body>

</html>

属性说明

　　<!DOCTYPE html> 　  声明为HTML5文档。

　　<html></html> 　　　  是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部(head)和主体(body)。

　　<head></head> 　　    定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。

　　<title></title> 　　　　 定义了网页标题，在浏览器标题栏显示。

　　<body></body> 　　   之间的文本是可见的网页主体内容。

标签的分类

标签的分类一

　　自闭合标签：单标签

　　闭合标签：双标签

标签的分类二

　　块级标签：就是独占一行，可以自行设置宽高！如：先学到的 div,p,h1-h6

　　内联标签：按内容占位，高度和广度是由自己的内容填充的 如： a,br,img

判断块级标签和内联标签的方法

　　1. 是否独占一行（可以通过设置背景颜色去判断）

　　2. 是否可以单独为元素设置高度和宽度。

标签关系

标签嵌套会产生 祖先 和 后代 , 父子, 兄弟关系

父子关系

外层 父元素 内层 子元素

在使用嵌套的时候 推荐使用父子结构来实现下拉菜单效果

祖先和后代

外层所有元素统称 祖先元素

内层元素称为 后代元素

兄弟关系

平级元素之间互为 兄弟元素

head 内的常用标签

meta 

设置标签属性 设置字符编码

<meta charset="UTF-8">

title

设置网页标题

<title></title>

style

设置网页样式

<style></style>

link

引入外部样式表文件

<link/>

script 

引入外部JS 代码用

<script></script>

body内常用标签 

基本标签(内联标签)

　　内联标签不需要另一起一行，以文本大小为定义大小

<b>加粗</b>

<i>斜体</i>

<u>下划线</u>

<s>删除</s>

<!--换行-->　　<br>

<span></span>

基本标签(块级标签)

　　块级标签需要另起一行

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

<!--水平线-->　　<hr>

<div></div>

<p></p>

　   浏览器默认字体大小 为 16px, 渲染的时候 小于 12px 的会强制改成 12px

　　h1 标签的字体大小为 32px

　　h4 标签的字体大小为 16px

　　h6 标签的字体大小为 12px

　　浏览器会对代码文本中的 换行 和 多余的空格 会解析成一个空格 ( 因此会导致格式不对应 )

文本标签属性

<h1 align = "center / left / right"> 标题 </h1>

　　默认都是左对齐, 其实此内容可完全被 css 样式替代

div 和 span 的区别 

<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.

<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

ps：

　　p 标签是个特异点，不可以嵌套其他块级标签，嵌套p标签也不行

字符实体

$lt;　　　　<

$gt;　　　　>

&nbsp;　　空格

&yen;　　 ¥ 人民币符号

&copy;　　© 版权符号

特殊标签

图片标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高">

ps：

　　宽高两个属性只用一个会自动等比缩放

　　windows 下如果 src 属性使用 绝对路径时 需要将所有的反斜线 " \ " 改成 斜线 " / "

　　路径要补全文件名且加后缀 ( 不加后缀被认为是目录 )

超链接标签

<a href="跳转路径" target="跳转后打开方式" >点我</a>

属性详细

  • href  属性指定目标网页地址。该地址可以有几种类型：

    • 绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
    • 相对URL - 指当前站点中确切的路径(href="index.htm")
    • 锚URL - 指向当前页面中的锚(href="#top") 取值为 "#" 表示当前页面
  • target  属性指定打开方式：
    • _blank表示在新标签页中打开目标网页
    • _self表示在当前标签页中打开目标网页(默认为此方式)

锚点实例

创建 a 标签 href 加 # 表示跳转 (不加 # 被识别为新连接)

创建 a 空标签 来实现被跳转 ( 指定内部属性 name 或者 href 为约定词)

<a href="#xxx">跳转到当前页面锚点 xxx位置 </a>

<a href="abc.html#xxx">跳转到 abc.html 文件的锚点 xxx 位置  </a> 

</-- 添加锚点 -->

<a name="xxx"></a>

<a href="xxx"></a>

列表

无序 ( unordered list )

<ul type="disc">

<li>第一项</li>

<li>第二项</li>

</ul>

type属性

  • disc    实心圆点(默认值)
  • circle    空心圆圈
  • square    实心方块
  • none    无样式

有序 ( ordered list )

<ol type="1" start="2">

<li>第一项</li>

<li>第二项</li>

</ol>

type属性

  •  1   数字列表(默认值)
  •  A   大写字母
  •  a    小写字母
  • Ⅰ  大写罗马
  •  i    小写罗马

标题列表

<dl>

    <dt>标题1</dt>

    <dd>内容1</dd>

    <dt>标题2</dt>

    <dd>内容1</dd>

    <dd>内容2</dd>

</dl>

表格

<table border="1">

    <thead>

        <tr>

            <td>id</td>

            <td>name</td>

            <td>age</td>

        </tr>

    </thead>

    <tbody>

        <tr>

            <th>1</th>

            <th>yang</th>

            <th>18</th>

        </tr>

        <tr>

            <th>2</th>

            <th>tuo</th>

            <th>13</th>

        </tr>

    </tbody>

</table>

tr 　　 定义表格行标签

th 　　填入表格标题首行数据单元格标签, 自带加粗和居中

td 　　填入表格数据单元格标签

table 属性

  • border　　表格边框粗细
  • cellpadding　　内边距  文本内容与边框的距离
  • cellspacing　　外边距  表格内单元格中间的边距
  • width　　    宽  像素单位  百分比.（最好通过css来设置长宽）
  • bgcolor　　　　背景颜色
  • rowspan　　单元格竖跨多少行
  • colspan　　单元格横跨多少列（即合并单元格）

tr / td / th  属性

    • bgcolor　　行背景颜色
    • width / height　　　宽 / 高
    • align　　水平方向   文本对齐 ( 默认居左 ) 
      • 可取值 　　left / right / center

valign　　

    垂直防线   文本对齐方式  (  )

    • 可取值 　　top /

 ps:

　　知道这些都没啥用. 我们不会使用这些东西来处理我们的样式

　　

　　但是 结构 相关属性需要重点理解

　　　　合并单元格的时候, 不会帮助你删掉被合并的单元格,

　　　　而是将被合并的单元格往后推, 因此破坏原有结构

　　　　因此必须要你手动删除被推出的单元格

　　跨列合并:　　删除当前行多余的单元格

　　跨行合并:　　删除其后行多余的单元格

　　tbody / thead / tfoot 不是必填项. 浏览器也会帮我们自动添加

　　默认 所有行自动加入到 tbody 中

form 表单

概念

　　表单收集用户信息并向服务器提交，从而实现用户与Web服务器的交互

表单属性

  • accept-charset 　　 规定在被提交表单中使用的字符集（默认：页面字符集） 　　　　　　
  • action 　　 规定向何处提交表单的地址（URL）（提交页面）　　　　　　
  • autocomplete 　　 规定浏览器应该自动完成表单（默认：开启）　　　　　　
  • enctype 　　 规定被提交数据的编码（默认：url-encoded）　　　　　
  • method 　　 规定在提交表单时所用的 HTTP 方法（默认：GET）　　　　　　
  • name 　　 规定识别表单的名称（对于 DOM 使用：document.forms.name） 　　　　　　
  • novalidate 　　 规定浏览器不验证表单   (浏览器会自带一个验证功能) 　　　　　　
  • target 　　 规定 action 属性中地址的目标（默认：_self）

input系列标签

text    　　　    单行输入文本     <input type=text" />

password       密码输入框       <input type="password" />

date    　　　   日期输入框       <input type="date" />

checkbox      复选框　　　      <input type="checkbox" checked="checked" />

radio    　　  单选框    　　    <input type="radio" />

submit        提交按钮　　      <input type="submit" value="提交" />

reset    　　  重置按钮    　　  <input type="reset" value="重置" />

button    　　 普通按钮　　      <input type="button" value="普通按钮" />

hidden    　   隐藏输入框    　  <input type="hidden" />

file    　 　   文本选择框    　  <input type="file" />

属性说明

name　　表单提交时的“键”,目的为提交后端的数据标识符(注意和id的区别)

value　　

　　表单提交时对应项的值

　　type="button" / "reset" / "submit"时

　　　　为按钮上显示的文本内容 ,  必填

　　type="text" / "password" / "hidden" 时

　　　　为输入框的初始值, 设置为 默认值 , 不设置也没关系, 用户输入可以覆盖默认值作为 value 传回

　　type="checkbox" / "radio" / "file" 时

　　　　为输入相关联的值  ,  必填

checked　　radio 和 checkbox 默认被选中的项

readonly　　text 和 password 设置只读 disabled：禁用,所有input均适用

ps：

1.  当 input 中有 文件 上传的时候必须要对 form表单做以下更改

<form action="/xxx" method="post" enctype="multipart/form-data">

    ...

</form>

2.  当有 AJAX 提交的时候不要用 submit ，要用 button

3.  一组 radio / checkbox 类型的时候, 必须要求 name 值一样才可以指定单选 或者 复选

4. 功能按钮  submit / reset  自带 value 为 "提交" / "清空" , 且不需要设置 name 属性, value 可以设置自定义显示文本

select 标签

<form action="" method="post">

<select name="city" id="city">

<option value="1">北京</option>

<option selected="selected" value="2">上海</option>

<option value="3">广州</option>

<option value="4">深圳</option>

</select>

</form>

属性说明

  • multiple　　布尔属性，设置后为多选，否则默认单选
  • disabled　　禁用
  • selected　　默认选中该项
  • value　　定义提交时的选项值

label标签

label 元素不会向用户呈现任何特殊效果。

<form action="">

<label for="username">用户名</label>

<input type="text" id="username" name="username">

</form>

<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

可实现点击label标签的时候自动跳转到 for所指定的的标签.实现相同的点击效果

textarea多行文本

<textarea name="" id="" cols="30" rows="10"></textarea>

属性说明

  • name　　     名称
  • rows　　      行数
  • cols　　　　列数
  • disabled　　禁用

HTML- 标签语法的更多相关文章

  1. HTML&CSS基础学习笔记1.3-HTML的标签语法

    HTML标签语法 1. 标签由英文尖括号<和>括起来,如<html>就是一个标签. 2. HTML中的标签一般都是成对出现的,分开始标签和结束标签.结束标签比开始标签多了一个/ ...

  2. ECMall2.x模板制作入门系列之2（模板标签/语法）

    ECMall2.x模板制作入门系列之2(模板标签/语法) 今天给大家带来一个模板语法的教程.希望能为ECMall模板制作者提供一份参考资料.如有问题.建议和意见,欢迎提出. 在ECMall模板中,用& ...

  3. PHPCMS中GET标签概述、 get 标签语法、get 标签创建工具、get 调用本系统演示样例、get 调用其它系统演示样例

    一.get 标签概述 通俗来讲,get 标签是Phpcms定义的能直接调用数据库里面内容的简单化.友好化代码,她可调用本系统和外部数据,仅仅有你对SQL有一定的了解,她就是你的绝世好剑!也就是适合熟悉 ...

  4. html caption标签 语法

    html caption标签 语法 caption是什么标签? 作用:定义表格标题. 说明:caption 标签必须紧随 table 标签之后.您只能对每个表格定义一个标题.通常这个标题会被居中于表格 ...

  5. html canvas标签 语法

    html canvas标签 语法 canvas是什么意思? 作用:定义图形,比如图表和其他图像. 说明:<canvas> 标签只是图形容器,通过脚本 (通常是JavaScript)来完成, ...

  6. html button标签 语法

    html button标签 语法 button标签怎么用? 作用:定义一个按钮. 语法:<button type="button">按钮</button> ...

  7. html br标签 语法

    html br标签 语法 br标签什么意思? 作用:插入一个简单的换行符.广州大理石机械构件 说明:<br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br>< ...

  8. html body标签 语法

    html body标签 语法 标签body是什么意思? 标签body是一个网页的身体部分,也就是用于定义网页的主体内容,也是一个HTML文档中必须的部分. 作用:定义文档的主体. 广州大理石机械构件 ...

  9. html b标签 语法

    html b标签 语法 标签b是什么意思? b的意思是bold,b标签主要用于html中规定粗体文本,该标签内的字符将被设为粗体.B标签所传达的意思只是加粗,没有任何其它的作用. 作用:规定粗体文本. ...

  10. html audio标签 语法

    html audio标签 语法 audio标签的作用是什么? 作用:<audio> 标签定义声音,比如音乐和视频或其他音频资源,使用audio标签可以不用Flash插件就可以听音乐看视频, ...

随机推荐

  1. 安卓基础之通过Intent跳转Activity

    通过Intent跳转Activity   一.通过意图开启Activity的方式:   隐式意图:通过指定一组数据或者动作实现 Intent intent=new Intent(); intent.s ...

  2. 支持JSP和Servlet的Web服务器

    支持JSP和Servlet的Web服务器 1.Tomcat 服务器 目前非常流行的Tomcat服务器是Apache-Jarkarta开源项目中的一个子项目,是一个小型.轻量级的支持JSP和Servle ...

  3. No module named "Crypto"，如何安装Python三方模块Crypto

    前两天公司公司老总让我研究怎么用企业微信第三方应用进行官网对接,完成URL回调验证问题. 具体如何进行Python 的Django网站与企业微信第三方应用进行回调验证的博客地址为:https://ww ...

  4. JMeter接口测试 (二) ~ 参数化

    对应qq群号:616961231 上篇内容介绍了jmeter的基本使用, 略微提了如何做参数化,  本篇对参数化做进一步深入讲解, 参数化可以将一个变量使用不同数据, 比如有多个用户下单购买商品,调用 ...

  5. SQLServer之创建分布式事务

    分布式事务创建注意事项 指定一个由 Transact-SQL 分布式事务处理协调器 (MS DTC) 管理的 Microsoft 分布式事务的起点. 执行 BEGIN DISTRIBUTED TRAN ...

  6. JavaScript（二）数据类型（一）

    计算机程序的运行需要对值进行操作,在编程语言中值的类型被称作数据类型,编程语言最基本的特性就是能够支持多种数据类型.当程序需要将值保存起来以备将来使用时,便将其赋值给一个变量.变量是一个值的符号名称, ...

  7. Proxmox VE中出现TASK ERROR: command 'apt-get update' failed: exit code 100的解决方法

    问题描述: 出现这个错误一般在WEB或者在Proxmox VE的服务器上面能看到日志: PVE中出现TASK ERROR: command 'apt-get update' failed: exit ...

  8. LeetCode算法题-Base 7（Java实现）

    这是悦乐书的第247次更新,第260篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第114题(顺位题号是504).给定一个整数,返回其基数为7的字符串表示.例如: 输入: ...

  9. Django REST framework基础：分页

    DRF分页组件 为什么要使用分页 我们数据表中可能会有成千上万条数据,当我们访问某张表的所有数据时,我们不太可能需要一次把所有的数据都展示出来,因为数据量很大,对服务端的内存压力比较大还有就是网络传输 ...

  10. vue 对象提供的属性功能、通过axio请求数据(2)

    1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...