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. SqlServer,Oracle,Mysql 获取指定行数

    --sqlserver * FROM dbo.T_TASK --oracle --mysql ,

  2. Markdown 语法的超快速上手

    本文支持WTFPL协议,因此你想往哪转就往哪转. Why markdown? Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. Ma ...

  3. 在jquery的ajax方法中的success中使用return要注意的问题

    jquery的ajax方法:在success中使用return:来结束程序的时候,结束的只是success这个方法,也就是说success中的return的作用范围只是success: 如果要想在su ...

  4. BestCoder #47 1001&amp;&amp;1002

    [比赛链接]cid=608">clikc here~~ ps:真是wuyu~~做了两小时.A出两道题,最后由于没加longlong所有被别人hack掉!,最后竟然不知道hack别人不成 ...

  5. PowerDesigner逆向工程，从SQL Server数据库生成Physical Model -----数据源方式

    1.File-Reverse Engineer-Database 2.DBMS选择SQL Server 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 一路Next..... ...

  6. RTSPClient工具EasyRTSPClient支持H.265，支持海思等各种芯片平台

    EasyRTSPClient是EasyDarwin开源流媒体团队开发.提供的一套非常稳定.易用.支持重连的RTSPClient工具,接口调用非常简单,再也不用像调用live555那样处理整个RTSP ...

  7. 理解vue ssr原理，自己搭建简单的ssr框架

    前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口.Vue SSR现在已经比较成熟了,但是如果是把一个SPA应用改造成SSR应用,成本还是有些 ...

  8. jquery中的attr与prop

    http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html

  9. 谈谈网站测试中的AB测试方法

    什么是A/B测试? A / B测试,即你设计的页面有两个版本(A和B),A为现行的设计, B是新的设计.比较这两个版本之间你所关心的数据(转化率,业绩,跳出率等) ,最后选择效果最好的版本. A / ...

  10. codeforces 460C. Present 解题报告

    题目链接:http://codeforces.com/submissions/ywindysai 题目意思:有 n 朵花,每朵花都有一定的高度(第 i 朵花对应 ai),m 天之后要把这些花送给别人. ...