html常用标签、包含关系、常用术语,以及网页设计中的字体分类
编程比较舒适的等宽字体:DejaVu Sans Mono
字体的分类:
serif (衬线字体){在笔画上面有些特殊的修饰效果}
sans-serif (非衬线字体){横平竖直.横就是横,点就是点}
monospace ( 等宽字体)
cursive ( 草书字体)
fantasy (虚幻字体)
以上这些分类都是一些大的分类, 并没有涉及具体的类型,如果将字体指定为这些格式,浏览器会自己选择指定类型的字体。一般情况在指定字体的时候.把分类名称放到最后面当备用字体
html标签
html标签的语义:
<div>,<span>没有任何默认样式和语义
<b>(加粗),<i>(斜体) 有默认样式 没有任何语义
<small> 有默认样式 h5中语义:用来表示一些细则,比如合同中的小字,版权声明等
<big>有默认样式 无语义 已淘汰
<cite>有默认样式 可以指明某内容的引用或参考,例如文章,图书,电影,标题,书名 例:<p><cite>《七龙珠》</cite>讲的是....<p>
<q>(行内引用)表示一个短的引用 例如 <p>孔子曰:<q>学而时习之</q></p> 有默认样式,浏览器会自动加一个引号
<blockquote>(块状引用)表示一个长的引用 例如 <p>孔子曰:<blockquote>学而时习之</blockquote></p> 有默认样式,浏览器会自动加一个引号
<sup>设置上标 比如 2<sup>2</sup> 则浏览器会显示2的2次方 或者可以加个a标签作为小备注
<sub>设置下标
<del>删除线
<ins> 表示插入的内容 浏览器会自动加上下划线
<pre>预格式标签 常用语代码的显示
<code> 仅仅语义表示这里面是一段代码,但是格式并不会保留.所以通常与 pre标签配合使用
ul,li无序列表
ol,li有序列表
dl,dd,dt 定义列表
注意:
一般情况下只会使用块元素包裹行内元素,而不会用行内元素包裹块元素
a 标签可以包裹任意元素,除了它本身(无论是块元素还是行内元素)
p元素不能包含其他的任何块元素
元素与元素之间的关系:
元素与元素之间的关系:
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后台元素的元素(父元素也属于祖元素)
后台元素:直接或间接被祖元素包含的元素(子元素也是后台元素)
兄弟元素:拥有相同父元素的元素叫做兄弟元素
什么是伪类:
伪类专门用来表示元素的一种特殊的状态
比如 访问过的超链接,焦点文本框
什么是伪元素
伪元素用来表示元素中的一些特殊的位置
html中em单位是什么意思
和百分比类似,它是相对于当前元素的字体大小来计算的.1em=1个font-size
原文地址:http://www.qingzhouquanzi.com/100.html
笔记来源于 b站 尚硅谷 html5课程103集
html常用标签、包含关系、常用术语,以及网页设计中的字体分类的更多相关文章
- Photoshop在网页设计中的应用与方法
1.图像局部截取和图像尺寸调整 做网页设计时经常要用到的某张图像一部分,这就需要截取图像的局部.图像局部截取的方法很多,但使用Photoshop操作起来更方便.具体操作步骤如下: (1)在Photos ...
- <转载>网页设计中的F式布局
地址:http://www.uisdc.com/understanding-the-f-layout-in-web-design 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布 ...
- 网页设计中11 款最好CSS框架
网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计.网页编码一定要合适.精确,才能保证不发生 ...
- 网页设计中常用的19个Web安全字体
来自http://www.jb51.net 在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.但多数情况 ...
- 网页设计中常用的Web安全字体
但多数情况下,考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写,这里整理了19个Web安全字体,让你无需任何顾虑的情况下畅快使用. 1, Arial 微软公司的网页核心字体 ...
- 详解CSS网页布局中默认字体样式
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
- 教你避雷!网页设计中常见的17个UI设计错误集锦(附赠设计技巧)
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 精心设计的用户界面对网站意义重大.具备所有最新功能和响应式设计有助于提高网站的搜索引擎排名,从而增加受众 ...
- WEB安全字体(Web Safe Fonts)-网页设计用什么字体兼容性好?
效果:http://sandbox.runjs.cn/show/qgdljvh4 1 Arial微软公司的网页核心字体之一,最常用的sans serif字体,当字号很小时不容易阅读.但是,大写的“I” ...
- HTML网页设计中 link 和 @import 的区别
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import.外部引用CSS两种方式link和@import的方式分别是 ...
随机推荐
- cmake尝试检测GCC版本报错
本人尝试编译指定commit版本的MRPT库,报错如下, CMake Error at cmakemodules/script_detect_gcc.cmake: (LIST): list GET g ...
- 使用Eigen遇到恶心报错
参考博客:https://www.cnblogs.com/wongyi/p/8734346.html 1. 数据类型报错 /home/wy/workdir/slambook/ch3/useEigen/ ...
- spring cloud:服务网关 Spring Cloud GateWay 入门
Spring 官方最终还是按捺不住推出了自己的网关组件:Spring Cloud Gateway ,相比之前我们使用的 Zuul(1.x) 它有哪些优势呢?Zuul(1.x) 基于 Servlet,使 ...
- ES6注
1.Promise构造函数 //resolve(成功),reject(失败)两个参数 function runAsync(){ var p = new Promise(function(resolve ...
- "error" : "Content-Type header [application/x-www-form-urlencoded] is not supported"
https://blog.csdn.net/weixin_40161254/article/details/86000839 Es Head https://www.cnblogs.com/afeig ...
- Python深度学习读书笔记-5.Keras 简介
Keras 重要特性 相同的代码可以在 CPU 或 GPU 上无缝切换运行. 具有用户友好的 API,便于快速开发深度学习模型的原型. 内置支持卷积网络(用于计算机视觉).循环网络(用于序列处理)以及 ...
- c语言中static关键字用法详解
个人总结: 1.C不是面向对象的,在c中static修饰的变量或函数仅在当前文件中使用 2.C可以对局部变量使用static修饰(注意面向对象的java则不行),其放在全局区一直存在 概述static ...
- 1、VMware安装步骤
最后重启电脑
- oracle存储过程和存储函数
存储过程 1.存储过程简介 下面先来简单介绍一下oracle的存储过程的语法,如下: create or replace procedure Tony_Process ( num in number, ...
- Centos 安装 FTP
安装教程: 基于 CentOS 搭建 FTP 文件服务 搭建完成后,使用windows文件夹访问FTP报错,请确保输入的文件名是否正确,并且您有权访问此文件. 先确认ftp服务正常 修改: 设 ...