html常用标签

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_34405925

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量77

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5af97dbdf265da0b8a67bfa1

版权

什么是html
html基本语法
常用标签及属性
链接
文本标记
表格
列表
表单
结构标记

什么是html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言,构建网站的基石,HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。

html基本语法

1-1 语法

HTML 标签是由尖括号包围的关键词，比如  <html>
HTML 标签通常是成对出现的，比如  <b>  和 </b> 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签 
复制代码

1-2 注释

在源码中编写，但不会被浏览器所解释的内容，成为注释
可以将对代码的解释说明放在注释中
语法：<!--  注释内容  -->
复制代码

1-3 文档结构

（1）文档类型声明
指定HTML的版本和风格<!DOCTYPE html>
（2）HTML页面
表示HTML页面的开始与结束
语法：<html></html>
位于<!doctype html>之下
复制代码

1-4 文档页面

<head></head>
紧跟在html之后，是html中的首个子元素

头部所包含的内容（子元素）
（1）网页标题：<title>标题内容</title>
（2）定义网页的编码格式,关键字，描述
    网页的编码格式：<meta charset="utf-8">(utf-8:支持中英文、标点、符号)
    关键字：<meta name="keywords" content="关键字">
    描述：<meta name="description" content="描述内容">
（3）定义或引用javascript：<script></script>
（4）<style></style>定义内部样式
（5）<link>引入外部样式
复制代码

链接

又称超链接，设置页面中允许被点击的内容。
【标签】<a></a>
【属性】
href：链接地址（要跳转到的页面的地址）
链接地址格式可为：  1,//qq.com
                    2,#xxx
                    3,?name=qqqq
                    4,./xxx.html
                    5,javascript:alert(xxx)    6,javascript: ;(伪协议)
target：目标，打开新网页的形式
取值：
     _blank：在新标签页中打开
     _self：在自身页面中打开（默认值）
     _parent:在父级页面打开
     ——top:在顶级页面打开
title：鼠标放到链接上的提示
复制代码

文本标记

特殊符号

< ：&lt;
> ：&gt;
& ：&amp;
不断行空格位 ：&nbsp;
" : &quot;
复制代码

文本样式

斜体：<i></i>
粗体：<b></b>
删除线：<s></s>
下划线：<u></u>
上标：<sup></sup>
下标：<sub></sub>
复制代码

标题+换行

【以标题的形式来显示文本内容】
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
【段落】<p></p>
【换行】<br>
【分割线】<hr>
复制代码

分区元素

（1）块分区元素：<div></div>
【特点】独立成行
【作用】页面布局
（2）行内分区元素：<span></span>
【特点】多个元素在一行内显示
【作用】设置同一行文字内的不同格式
复制代码

行内和块级元素

（1）块级元素（div 、p、h1~h6）
【特点】元素会独占一行，即元素前后都会自动换行，主要用于网页布局
（2）、行内元素（ span、i、b、s、u、sub、sup、img、a）
【特点】不会换行，多个元素会在一行内显示
复制代码

图像

【标签】<img>
【属性】
        src：图片地址（绝对/相对）
        width：图像宽度
        height：图像高度
复制代码

表格（一个完整的表格）

<table>
   <thead>
    <tr>
      <td>姓名</td>
       <td>性别</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>女</td>
    </tr>
  </tbody>
</table>
复制代码

列表

【有序列表】
<ol>
     <li></li>
</ol>
【无序列表】
<ul>
     <li></li>
</ul>
【自定义列表】
<dl>
     <dt>列表中的标题内容</dt>
        <dd>列表中的数据</dd>
</dl>
复制代码

form表单

由<form>定义，将用户输入的数据提交给后台。
【常见属性】
        action：提交的服务器地址
        method：表单数据提交的方式，取值： get：明文提交/post：隐式提交
        name：定义表单名称，JS用到的比较多
        id： 独一无二的标识
如：<form action="url" method="get/post"> </form>
action 指定请求路径
method 指定请求动词
forme有与a标签一致的target
复制代码

iframe

<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
复制代码

常见结构标记

<header></header>：定义文档的页眉即页面顶部信息
<nav></nav>：定义页面的导航链接部分
<section></section>：定义文档中的节，文档中主体内容
<article></article> ：定义独立于文档的其他部分内容(章、节等)
<footer></footer>：定义某区域的脚注信息，页面底部内容等
<aside></aside>：多用于侧边栏和相关引用信息等
温馨提示：在页面编写中，能用结构标记的，尽量不使用div
复制代码