当前位置: 首页 > news >正文

HTML总结

CSS代码风格

空格规范:

        1. 属性值前面,冒号后面,保留一个空格;

        2. 选择器(标签)和大括号中间保留空格。

基本语法概述:

1.HTML标签是由尖括号包围的关键词,如<html>

2.HTML标签通常是成对出现的,例如<html>和</html>,我们称为双标签。标签对中的第一个标签是开始标签,第二个是结束标签。

3.有些特殊的标签必须是单个标签(极少情况),例如<br/>,我们称为单标签

标签:

分区 div

标题标签 h1~h6

段落标签 p,p标签中不能放任何块元素

图像 img:src属性(必须有)、alt属性,属于替换元素(块和行内元素之间,具有两种元素的特点)

列表 ul/ol/dl:用来布局

超链接 a行内元素,在a 标签中可以嵌套除它自身外的任何的元素(包括块元素)

表单 form

表格 table:显示数据,合并单元格

框架 iframe

属性:

在标签中(开始标签或者自结束标签)还可以设置属性

        属性是一个名值对(x = y)

        属性用来设置标签中的内容如何显示

        属性和标签名或者其他属性应该使用空格隔开

        属性名(值)不能瞎写,应该根据文档中的规定来编写

                有些属性有属性值,有些没有,如果有属性值,属性值应该使用引号引起来。

href属性指定链接的地址:超文本引用(hypertext reference);超链接

单标签:<br/>换行、<hr /> 水平线、<img/>、<input/>、<meta/>

特殊字符/实体: 使用&,&gt 大于号,&lt 小于号,&nbsp 空格

块元素: 标题标签、p标签、blockquote(长引用)、div、ul、ol、li等

行内元素: em标签(语音语调的一个加重)、strong标签(强调重要的)、q标签(短引用)、a标签、b、i、del、s、span等,其中span是最典型的行内元素。

行内块元素: img、input、td,他们同时具有块元素和行内元素的特点

块元素的特点:

  1. 比较霸道,独占一行

  2. 高度、宽度、外边距以及内边距都可以控制

  3. 宽度是默认容器(父级宽度)的100%

  4. 是一个容器及盒子,里面可以放行内或者块级元素

 注意:

        文字类的元素内不能使用块级元素,p标签主要用于存放文字,因此p中不能放块级元素

        同理,h1~h6等都是文字类块级标签,里面也不能放其它块级元素。

行内元素的特点:

  1. 相邻的行内元素在一行上,一行可以显示多个

  2. 高、宽直接设置是无效的

  3. 默认宽度就是它本身内容的宽度

  4. 行内元素只能容纳文本或其他行内元素

  注意:

         链接里面不能再放链接

         特殊情况链接 a 里面可以放块级元素,但是给 a 转换一下块级模式最安全

行内块元素的特点:

  1. 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)

  2. 默认宽度就是它本身内容的宽度(行内元素特点)

  3. 高度、行高、外边距以及内边距都可以控制(块级元素特点)

元素显示模式转换

比如想要增加链接 a 的触发范围

  转换为块级元素:  display: block;

  转换为行内元素:  display: inline;

  转换为行内块元素: display:inline-block

单行文字垂直居中的代码

  解决方案:让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中

网页布局要学习的三大核心: 盒子模型、浮动 和 定位 

        

http://www.lryc.cn/news/2596.html

相关文章:

  • ByteHouse:基于ClickHouse的实时数仓能力升级解读
  • [SSD固态硬盘技术 15] FTL映射表的神秘面纱
  • 浅析依赖注入框架的生命周期(以 InversifyJS 为例)
  • HER2靶向药物研发进展-销售数据-上市药品前景分析
  • 【第38天】不同路径数问题 | 网格 dp 入门
  • LINUX之链接命令
  • 1628_MIT 6.828 xv6_chapter0操作系统接口
  • 使用 Sahi 实现 Web 自动化测试
  • 天津菲图尼克科技携洁净及无菌防护服解决方案与您相约2023生物发酵展
  • Java 网络编程详解
  • Scratch少儿编程案例-几何形式贪吃蛇
  • 一定要收藏的面试思维导图,粉丝分享面试经验
  • 【博客615】通过systemd设置cgroup来限制服务资源争抢
  • C语言经典编程题100例(21-40)
  • Rabbitmq业务难点
  • 服务器如何下载百度网盘文件?Linux服务器如何在百度网盘中连接、上传下载;在Linux服务器上下载百度云盘中的资料
  • Cesium-数字仿真-你总要了解
  • 原型、原型链、__proto__与prototype的区别、继承
  • 前端 面经
  • [oeasy]python0080_设置RGB颜色_24bit_24位真彩色_颜色设置
  • 实战项目-用户评论数据情绪分析
  • day02 DOS(续)文本编辑快捷键 发展史
  • arm64与aarch64
  • QString详解
  • SpringCloud微服务
  • Hive 连接及使用
  • android libavb深入解读
  • 【面试题】对闭包的理解?什么是闭包?
  • 笔试题-2023-乐鑫-数字IC设计【纯净题目版】
  • antd日期组件时间范围动态跟随