认识HTML和CSS
1、认识HTML标记
HTML的全称是Hyper text markup language,超文本标记语言，用于定义文档的内容结构。在HTML中，所有的标记都是成对出现的。
<html>标记：是HTML文档的根元素，放在开头，表示网页文档的开始。
<head>标记：出现在文档的起始部分，标明文档的头部信息，比如标题信息。
<body>标记：文档的主体区域网页所要显示的内容都在这个标记内。
2、HTML元素的组成部分
3、元素的层次结构
一个元素的内容中可以包含其他元素，形成嵌套的层次结构；但两个元素之间不能相互嵌套，比如：
4、HTML基础标签的使用
（1）标题标签：h1-h6，数字越大字体越小，如下图：
效果图如下图所示:
(2)段落标签：p（会自动换行）
（3）块级标签和行内标签、行内块级标签：
块级标签：不管多少内容都会独占一行，可设置宽高，内边距和外边距，比如h1-h6,p,div,ul等等；
行内标签：宽度高度都是根据自己内容的多少自动调整，也就是说，大小是被内容撑开，不会独占一行，内容多少占多少，不能调整宽度高度；可以设置内边距，外边距只能设置左右外边距。
比如：a,strong等等；
行内块级标签：综合块级元素和行内元素，可设置宽度高度，也可设置内外边距。比如img元素。
（4）img：图片标签，可以吧图片显示在界面上，alt（代替性文字说明），src（图片的路径）。
（5）br标签，插入一个换行符。
（6）hr标签，插入一条分割线，可以再视觉上将文档分隔成各个部分。
（7）a标签，创建超链接的元素，进行页面的跳转或者制作网页锚点。
（8）有序列表和无序列表
ul>li：无序列表，没有顺序
ol>li：有序列表，会自动产生一个顺序，并可以选择排序方式。
认识HTML和CSS的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- spring-cloud-config 配置中心快速上手
spring-cloud-config 配置中心实现 Spring Cloud Config 用于为分布式系统中的基础设施和微服务应用提供集中化的外部配置支持,分为server端和client端. s ...
- copy好文“IT34岁危机破解心法”
在博客园中偶然发现一个好文,收藏并记录以下.在工作中更多的从企业单位用人角度去思考,或许能在职场及职业规划中更加的游刃有余,有的放矢.下面是原文. 本文题目虽是“IT人34岁危机”破解心法,但内容同样 ...
- 随笔编号-08 MYSQL 存储过程，5分钟执行调用过程；
delimiter //DROP PROCEDUREIF EXISTS jdt.day_instan_data_task// CREATE PROCEDURE jdt.day_instan_data_ ...
- vue实现输入框的模糊查询（节流函数的应用场景）
上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到 ...
- 最近学习了限流与RateLimiter
前言 分布式环境下应对高并发保证服务稳定几招,按照个人理解,优先级从高到低分别为缓存.限流.降级.熔断,每招都有它的作用,本文重点就讲讲限流这部分. 坦白讲,其实上面的说法也不准确,因为服务降级.熔断 ...
- Socket I/O模型之select模型
socket网络编程中有多种常见的I/O模型: 1.blocking阻塞 2.nonblocking非阻塞 3.I/O multiplexing复用 4.signal driven 5.asynchr ...
- Go Home Trash！垃圾分类 风险与对策
一.外部风险 政策风险 (1)税收风险 本项目同时牵涉教育以及公益领域,在国家大力支持垃圾分类.互联网.信息科技等高技术产业的发展的背景下,我们可以依照国家相关税收政策依法享受国家税收优惠与减免.本公 ...
- net start mysql提示：服务名无效
1.win+R打开运行窗口,输入services.msc 2.在其中查看mysql的服务名,我的是MySQL55 3.以管理员身份打开cmd,输入net start MySQL55 出现下图,代表my ...
- 牛客暑假多校第五场 I vcd
这个题目一个队友没读懂, 然后我读错了题目, 还让他堆了半天的公式写了半天的代码, 交上去一直0.0, 另一队友问题目有没有读错, 我坚持没有读错, 然后坑了2个小时的时间,不然应该会早一点做出来. ...
- codeforces 862 C. Mahmoud and Ehab and the xor（构造）
题目链接:http://codeforces.com/contest/862/problem/C 题解:一道简单的构造题,一般构造题差不多都考自己脑补,脑洞一开就过了 由于数据x只有1e5,但是要求是 ...