html元素分类
内连元素：出现在行内的元素
           <img>,<q>,<a>
块元素：前后自动插入换行的元素
        <h1>,<p>,<blockquote>
空元素：元素的开始标志和结束标志没有内容的元素
        <br>,<img>
 

特殊元素

<q>：
内连元素（出现在行内），用于简短文字的引用

<blockquote>

块元素（前后有换行符），引用一大段文字并独立显示

<br>

没有内容的元素即空元素，表示换行

<a>

链接元素
1）可以用title属性提供提示；
2）可以跳转到其他页面（herf属性），也可以通过锚跳转到同一个页面其他地方(id属性)；
3）target属性控制本窗口还是新窗口打开

<img>

图像元素，提供一种途径指定需要在页面中显示图像的位置；html是纯文本文件，图像并非是html文件的一部分，需要进行额外的依次请求和显示。
1）目前使用最广的图像格式是gif（支持透明），jpg；
2）可以使用alt属性，在图像不能正常显示时，给出文字提示信息；
3）最好给出图像的width和height属性，并不是为了控制样式，而是在图像下载之前，告诉浏览器图像的大小来调整布局，但不建议利用width和height属性来调整图像大小，因为这样的话，首先需要下载整张图像，因此，最好事先将图像大小调整为需要的类型。
 
 

html结构要点以及嵌套规则

1）html元素名称不区分大小写，不过最好都用小写
2）html总是用一个DOCTYPE开始，用于说明超文本类别（如协议版本4.0.1）
3)在DOCTYPE之后，网页以<html>标记开始，以</html>标记结束
4）<title>,<meta>和<style>元素可以放置的唯一位置就是<head>
5)<body>元素只能直接放置块元素<h1>,<p>,<blockquote>等，所有的内联元素和文本都必须在块元素中才能运行。
6）块状元素禁止包含在<p>元素中，因为只有文本才能组成段落，当然，段落中可以包含任何内联元素。
7）列表<ul>,<ol>只能包含列表项<li>,列表项<li>可以使任何内容，包括内联元素或者块元素。
8）和其他块元素不同，<blockqoute>只能直接包含块元素，请将文本或内联元素置于块元素之内，再一起加入<blockqoute>
9)可以讲内联元素任意嵌入另外一个内联元素中，不过有两种例外，<a>不能自我嵌套，<img>是空元素，也不能嵌套。
10）div用来将块级的内容分成不同的逻辑结构；在页面中，使用而不要滥用div，借用div将页面分成几个合理的逻辑结构，有助于网页结构的清晰和样式化，如果添加<div>仅仅使得页面拥有更多的结构，那除了使得页面变得更复杂之外，没有任何好处。
11）span可以把内联内容分成不同的逻辑部分，不会造成换行。
 

css样式

1）text-align只能用于块元素，可以使得块元素中的所有内联元素集中（不仅仅限于文本），也可以被任何嵌套的块元素继承。
2）可以设置内联元素的宽度，但是只有排版时才能看到效果，也可以为内联元素增添边界或补白——如果在内敛元素的四周都添加了边界，只能看到左边和右边的空间。可以在内敛元素的上侧和下侧添加补白，不过这些补白不影响周围其他内连元素的空间，所以补白会跟其他内联元素重叠。图像跟其他内联元素不同，其width，padding和margin属性更接近于块元素。
 
 

前端学习之一_html学习的更多相关文章

  1. 转 - Web新人（偏前端）应该怎样学习（个人观点，勿喷）

    我自己是会计专业,转行自学web的,学习有一两年了,也还是新人一个,只不过不是那种超级“新”的,所以有什么话说得不对,请轻喷.欢迎大家来和我交流. 1.我能不能转行学web? 能不能学web这个不是别 ...

  2. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  3. 2019最新WEB前端开发小白必看的学习路线(附学习视频教程)

    2019最新WEB前端开发小白必看的学习路线(附学习视频教程).web前端自学之路:史上最全web学习路线,HTML5是万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次 ...

  4. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

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

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

  6. 想做web前端project师应该学习些什么？

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  7. PHP Loser 说说做前端需要如何进一步学习

    PHP Loser 说说做前端需要如何进一步学习 做前端的,需要如何进一步学习?书籍这个事情贵精不在多,我这里推荐两本即可: <javascript教程 高级程序设计> <CSS权威 ...

  8. 前端学习：JS学习总结（图解）

    前端学习:JS学习总结(图解) JS的代码笔记 JS比HTML和CSS的知识点要多的多,下面分几段来介绍其内容... 为了能让大家更好的检索,前面的图解是整个JS的概括,后面的才是知识点... 旁边就 ...

  9. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

随机推荐

  1. python基础之函数当中的装饰器

    在实际工作当中存在一个开放封闭原则 1.对扩展是开放的 为什么要对扩展开放呢? 我们说,任何一个程序,不可能在设计之初就已经想好了所有的功能并且未来不做任何更新和修改.所以我们必须允许代码扩展.添加新 ...

  2. python flask解决上传下载的问题

    记录瞬间 最近为了解决一些新的需求,简单介入了flask对文件的上传和下载的方法,并分别使用python和curl模拟发送 代码: #! /usr/bin/env python3 # coding:u ...

  3. Zookeeper报错Will not attempt to authenticate using SASL解决办法

      版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq642159746/article/ ...

  4. 18 Python之初识面向对象

    1. 类与对象 class Car: #类名首字母大写,严格遵守驼峰命名规范 pass #造车 c = Car() #类名() #创建对象 ##出场之后进行改装 c.color = "红色& ...

  5. PHP高级进阶之路

    一:常见模式与框架 学习PHP技术体系,设计模式,流行的框架 常见的设计模式,编码必备 Laravel.ThinkPHP开发必不可少的最新框架 YII.Symfony4.1核心源码剖析 二:微服务架构 ...

  6. 【项目构建工具】 Gradle笔记2

    一.Gradle执行流程 1.Gradle的执行流程(生命周期)主要是三个阶段: 初始化阶段:解析整个工程中所有Project,构建所有的Project对应的project对象 配置阶段:解析所有的p ...

  7. leetcode240 搜索二维矩阵 II

    题目: 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性: 每行的元素从左到右升序排列. 每列的元素从上到下升序排列. 示例: 现有矩阵 ma ...

  8. 【异常】~/.bash_profile:source:44: no such file or directory: /usr/local/Cellar/nvm/0.34.0/nvm.sh

    1 异常信息 /Users/zhangjin/.bash_profile:source:: no such file or directory: /usr/local/Cellar/nvm//nvm. ...

  9. 2.flask模板--jinja2

    1.jinja2模板介绍和查找路径 import os from flask import Flask, render_template # 之前提到过在渲染模板的时候,默认会从项目根目录下的temp ...

  10. Linux系统吃“内存”现象

    而当我们使用free命令查看Linux系统内存使用情况时,会发现内存使用一直处于较高的水平,即使此时系统并没有运行多少软件.这正是Windows和Linux在内存管理上的区别,乍一看,Linux系统吃 ...