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. Day1 [上]- 认识Python

    python简单介绍: python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...

  2. python发送邮件相关问题总结

    一.发送邮件报错:554:DT:SPM 1.报错信息 2.通过查找163报错信息页面,554 DT:SPM的问题如下: 3.将邮件主题中的“test”去除,经过测试,实际上邮件主题包含“test”也能 ...

  3. mac USB串口工具配置

     安装USB serial 驱动 我的usb serial芯片是 pl2303, 先到官网上下载对应驱动,并安装.安装完成之后会要求重启. http://www.prolific.com.tw/adm ...

  4. VC ++6.0英文版常用菜单使用参考【转载整理】

    (1)File菜单 New:打开“new”对话框,以便创建新的文件.工程或工作区. Close Workspace:关闭与工作区相关的所有窗口. Exit:退出VC6环境,将提示保存窗口内容等. (2 ...

  5. EasyPusher：基于live555的DarwinInjector实现的RTSP直播推送程序

    先简单介绍一下EasyPusher的功能,后面再对具体内部架构做介绍: EasyPusher:https://github.com/EasyDarwin/EasyPusher EasyPusher是什 ...

  6. call by value reference name

    按名调用 Algol 按值调用 Java https://docs.python.org/3.6/faq/programming.html#how-do-i-write-a-function-with ...

  7. 使用注解来构造IoC容器-转

    新手,对于一些觉得有用的东西,直接转过来用了,自己理解的比较肤浅 使用注解来构造IoC容器 用注解来向Spring容器注册Bean.需要在applicationContext.xml中注册<co ...

  8. Windows平台，开机自动运行应用

    打开注册表编辑器(Win+R后执行regedit) 进入HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run 新建字符串值, ...

  9. PHP开发工作心得

    一.扎实PHP自身的基础知识.函数.常量等,尽量用内置的方法解决这个问题(由于个人写的往往运行效率没有内置方法高): 二.代码尽量少的实现功能(由于PHP的运行事实上是,将咱们的代码先处理成底层语言进 ...

  10. HZNU 2154 ldh发奖金【字符串】

    题目链接 http://acm.hznu.edu.cn/OJ/problem.php?id=2154 思路 先判断不能拆分的情况 以为需要拆分成两个正整数 所以我们可以知道 只有个位的数字 是不能够拆 ...