HTML 中的标签存放于文本文件中 需要按照以下固定的文档结构组织：
<!DOCTYPE HTML>
<html>
    <head>
头部相关信息

    </head>
    <body>
    页面主体相关内容

    </body>
</html>

标签解释：
#1、<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

#2、<html></html> 称为根标签，所有的网页标签都在<html></html>中。

#3、<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍，<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

#4、在<body>和</body>标签之间的内容是网页的主要内容，最终会在浏览器中显示出来。

标签关系：
并列和嵌套
并列：head 和body
嵌套：html内有body

二 HTML标签详细语法与注意点

标签的语法：

<标签名 属性1=“值1” 属性2=“值2” ......>内容部分</标签名>
<标签名 属性1=“值1” 属性2=“值2” ....../>
注意：

#1. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，大部分程序员都以小写为准。

#2. 标签之间是可以嵌套的。例如：<div><p>段落</p></div>,但不能交叉<div><p></div></p>

#3、不是所有标签都支持互相嵌套。

三 HTML中标签分类：
单从是否可以嵌套子标签的角度去分， 标签分为两类
1：容器类标签（能嵌套其他标签）
h 系列
ul>li
ol>li
d1>dt+dd
div

2文本标签（文本标签 只能嵌套文字、图片超连接标签。
    p
    span
    strong
    em
    ins
    del

四 head内常用标签
1 meta 相关
#1、指定字符集
<meta charset="gbk">

#2、页面描述
<meta name="Description" content="具体描述。。。">

#3、关键字：有助于搜索引擎SEC优化，再怎么优化也抵不过竞价排名
<meta name="Keywords" content="网易，邮箱，游戏，新闻">

#4、3秒后跳转
<meta http-equiv="refresh" content="3,http://www.baidu.com">
#5、三秒刷新
<meta http-equiv="refresh" content="3">

2：非meta标签
#1、标题
<title>百度一下，你就知道</title>

#2、网站的图标
<link rel="icon" href="https://www.baidu.com/favicon.ico">

#3、定义内部样式
<style></style>

#4、引入外部样式文件
<link rel="stylesheet" href="mystyle.css">

#5、定义JavaScript代码或引入JavaScript文件
<script src="hello.js"></script>　

五 body标签
h 标签
h1~ h6  标记内容为1~6级标题

p 标签  标记为内容 的一哥段落

img标签 标记一哥图片
用法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "鼠标悬停到图片上时显示的内容" />
2.1 src指定的图片地址可以是网络地址，也可以是一个本地地址，本地地址可以用绝对或相对路径，但通常用相对路径，相对路径是以html文件当前所在路径为基准进行的

2.2 图片的格式可以是png、jpg和gif

2.3 alt="图片加载失败时显示的内容"

2.4 title = "鼠标悬停到图片上时显示的内容"

2.5 如果没有指定图片的width和height则按照图片默认的宽高显示，如果指定图片的width和height则可能让图片变形
那如果又想指定宽度和高度，又不想让图片变形，我们可以只指定宽度和高度的一个值即可
只要指定了一个值，系统会根据该值计算另外一个值，并且都是等比拉伸的，图片将不会变形

a标签
标记一哥内容为超链接
#1、超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转，语法如下
<a href="跳转到的目标页面地址" target="是否在新页面中打开" title="鼠标悬浮显示的内容">需要展现给用户查看的内容/也可以是图片</a>

#2、注意：
2.1 a标签不仅可以标记文字，也可以标记图片
    <a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a>

2.2 a标签必须有href属性，href的值必须是http://或https://开头

2.3 a标签还可以跳转到自己的页面
    <a href="template/aaa.html">锤你胸口</a>

2.4 target="_blank"代表在新页面中打开，其余的值均无需记忆，
    如果页面中大量的a标签都需要设置target="_blank",那么我们可以在head标签内新增一个base标签进行统一设置
    <base target="_blank">
    如果a标签自己设置了target，那么就以自己的为准，否则就会参照base的设置

2.5 title="鼠标悬浮显示的内容

列表标签
语义 标记一堆数据是一个整体列表
HTML分三种
1  无序列表ul>li 列表标签中使用最多的一种非常重要
2 有序列表 极少用 ol>li
3 自定义列表 经常用
<dl>
    <dt>自定义标题1<dt>
    <dd>描述1<dd>
    <dd>描述2<dd>
    <dd>描述3<dd>
</d1>

<table>标签
语义：标记一段数据为表格
#1、作用
表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的

#2、格式
<table>
    <tr>
        <td></td>
    </tr>
</table>

tr代表表格的一行数据
td表一行中的一个单元格

#3、注意点：
表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0，所以看不到边框

form 标签
语义标记表单
#1、什么是表单？
    表单就是专门用来接收用户输入或采集用户信息的

#2、表单的格式
    <form>
        <表单元素>
    </form>

前端HTML 与css 整理（未完）的更多相关文章

  1. 前端必会css整理

    1.设置css样式的三种方式?         外部样式表,引入一个外部css文件         内部样式表,将css代码放在<head>标签内部         内联样式,将css样式 ...

  2. sublime常用快捷键整理(未完待续)

    sublime常用快捷键整理: 基本操作 cmd+o 打开文件 cmd+w 关闭当前tab cmd+n 打开新页 cmd+shift+n 打开刚刚关闭的页签 一.选择命令 1.多个单词选择 cmd+d ...

  3. web前端开发面试题（未完待续）

    一.HTML与XHTML的不同:1)XHTML元素必须被正确地嵌套 2)元素必须被关闭   如:<h1>--</h1>关闭 3)标签名必须用小写字母 4)XHTML文档必须有根 ...

  4. noip2017考前整理(未完)

    快考试了,把我以前写过的题回顾一下.Noip2007 树网的核:floyd,推出性质,暴力.Noip2008 笨小猴:模拟Noip2008 火柴棒等式:枚举Noip2008 传纸条:棋盘dpNoip2 ...

  5. [Unity菜鸟] Unity鼠标双击，鼠标函数整理(未完)

    1. 鼠标双击 void OnGUI() { Event Mouse = Event.current; if (Mouse.isMouse && Mouse.type == Event ...

  6. Python 基础整理(未完)

    数据类型和变量: 整数:Python可以处理任意大小的整数,当然包括负整数,在程序中的表示方法和数学上的写法一模一样,例如:1,100,-8080,0,等等. 计算机由于使用二进制,所以,有时候用十六 ...

  7. 《MySQL 基础课程》笔记整理（进阶篇）（未完）

    一.MySQL服务安装及命令使用 安装过程就不写了,毕竟百度经验一大把 MySQL 官方文档 MySQL 参考手册中文版 1.MySQL简介 ​ RDBMS(Relational Database M ...

  8. 前端html与css学习笔记总结篇(超详细)

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  9. 2018 CVTE 前端校招笔试题整理

    昨天晚上(7.20)做了CVTE的前端笔试,总共三十道题,28道多选题,2道编程题 .做完了之后觉得自己基础还是不够扎实,故在此整理出答案,让自己能从中得到收获,同时给日后的同学一些参考. 首先说一下 ...

随机推荐

  1. Android-运行时权限

    由于拨打电话数据用户的隐私,再者由于在5.0之后Android更注重于用户的隐私权限,为此出现了在低版本没有的问题,而在高版本出现的个别问题! Intent intent = new Intent(I ...

  2. VS重置命令：devenv.exe/resetuserdata

    VS命令行下执行下面的命令: devenv.exe/resetuserdata

  3. EasyDarwin开源流媒体服务器实现RTSP直播同步输出MP4、RTMP、HLS的方案思路

    背景 近期跟开源团队商量,想在EasyDarwin上继续做一些功能扩展,目前EasyDarwin开源流媒体服务器只能够实现高效的RTSP推流直播转发/分发功能,输入与输出都是RTSP/RTP流,不能够 ...

  4. ESXi 5.5 RTL9168E网卡驱动 找到网卡

    如果你对专业服务器的价格望而却步,恰巧又想在普通的PC上安装ESXi,恰巧又是ESXi 5.5版本,那么这篇文章中提及的问题你可能会遇到,并能给你提供一些帮助. 1.成功安装重启以后提示“no boo ...

  5. MongoDB——mongo-connector同步到ES

    1.搭建完毕MongoDb复制集环境 2.开始安装 mongo-connector pip install mongo-connector:基于pip命令,不管是linux .window 系统默认有 ...

  6. ubuntu 12.04 解压安装jdk

    ubuntu下解压安装jdk,简单方便.分享一下安装方法: 注:该方法针对新系统,之前没有配置过jdk的情况. 1.下载相应版本号的jdk压缩包.如 jdk-8u5-linux-x64.gz 2.解压 ...

  7. appium()-java-client-api

    //appium java-client-api 介绍 原文地址:http://appium.github.io/java-client/index-all.html#_S_ A B C D E F  ...

  8. POJ1006 Biorhythms —— 中国剩余定理

    题目链接:https://vjudge.net/problem/POJ-1006 Biorhythms Time Limit: 1000MS   Memory Limit: 10000K Total ...

  9. BZOJ2120 数颜色 —— 待修改莫队

    题目链接:https://vjudge.net/problem/HYSBZ-2120 2120: 数颜色 Time Limit: 6 Sec  Memory Limit: 259 MBSubmit:  ...

  10. 最基本PSO算法的C++实现

    按照James Kennedy & Russell Eberhart (1995)的版本,算法过程如下: [x*] = PSO() P = Particle_Initialization(); ...