TOP

HTML - 标签语法

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  禁用

 

posted @ 2018-11-23 11:25  羊驼之歌  阅读(399)  评论(0编辑  收藏  举报