HTML <!DOCTYPE> 标签 布局引用的几种方法 行级元素与块级元素

HTML <!DOCTYPE> 标签

<!DOCTYPE html>
  <html>
    <head>
       <title>文档的标题</title>
    </head>

    <body>
      文档的内容......
    </body>
</html>

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

要总是向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能知道文档的类型。

HTML 4.01 与 HTML5 之间的差异(如下所示)

布局引用的几种方法

三种:1,连接到外部样式表:<link rel="stylesheet" type="text/css" href="css/index.css">(添加到head部分里面)

2,创建嵌入式样式表:在HTML的head部分创建一个style元素,直接写入样式规则

<style>

img{border:8px solid red;

}</style>

3,应用内联样式:直接在元素内添加一个style(如)

<img scr="ticket.png" class="picture" alt="a ticket" style="border:8px solid red" />

 

行级元素与块级元素

块级元素占一行,不论内容多少只要是有2个这样的元素就会换行,行内元素内容少时不会换行。这是个重要区别。

块级元素(block element)

  1.   * address - 地址
  2.   * blockquote - 块引用
  3.   * center - 举中对齐块
  4.   * dir - 目录列表
  5.   * div - 常用块级容易,也是css layout的主要标签
  6.   * h1 - h6
  7.   * menu - 菜单列表
  8.   * ol - 排序表单
  9.   * p - 段落
  10.   * pre - 格式化文本
  11.   * table - 表格
  12.   * ul - 非排序列表
  13. 内联元素(inline element)
  14.   * a - 锚点
  15.   * abbr - 缩写
  16.   * acronym - 首字
  17.   * b - 粗体
  18.   * br - 换行
  19.   * cite - 引用
  20.   * code - 计算机代码(在引用源码的时候需要)
  21.   * dfn - 定义字段
  22.   * em - 强调
  23.   * font - 字体设定(不推荐)
  24.   * img - 图片
  25.   * input - 文本框
  26.   * label - 表格标签
  27.   * q - 短引用
  28.   * select - 项目选择
  29.   * small - 小字体文本
  30.   * span - 常用内联容器,定义文本内区块
  31.   * strong - 粗体强调
  32.   * sub - 下标
  33.   * sup - 上标
  34.   * textarea - 多行文本输入框
  35.   * var - 定义变量
时间: 2024-10-24 04:16:55

HTML <!DOCTYPE> 标签 布局引用的几种方法 行级元素与块级元素的相关文章

Css三栏布局自适应实现几种方法

Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏布局自适应: 代码如下 复制代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位法</title> <style>  .pa

响应式布局实现的几种方法 — 弹性布局

响应式布局实现的几种方法 - 弹性布局 响应式布局的实现是前端工程中一个非常大的跨越,它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力.就今天这个机会,我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局. 弹性布局是一种十分方便的,只需要依赖于CSS样式的实现响应式布局的方式,也是K最多用到的一种实现响应式的方法.尤其是现在类似于某宝.某东一类的电商web站或者手机app的页面,利用弹性布局是都可以很轻松的实现的,下面就是本K用弹性布局copy的某动的手机应用的部

前端基础一:Doctype? 行内元素和块级元素

问题1:Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. 该标签可声明三种 DTD 类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档. 以下面这个 <!DOCTYPE> 标签为例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

html入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应< >对应> 二.行内元素和块级元素1.块级标签默认情况下,每一个块级元素都是独占一行的即元素的前后都会换行 都有 align 属性,例如: p标签 段落标签 h1~6标签 标题标签 hr标签   水平分割线标签 div标签 块级元素 2.行内标签 不会换行可以和其他的标签或文本在一行内显示

a标签调用js的几种方法

我们常用的在a标签中有点击事件: <a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段. 这里的href="javascript:;",其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时,如果页面内容很多,有滚动条时,页面不会乱跳,用户体验更好1. a

html 行级元素和块级元素标签列表分别有哪些

行内元素列表: <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的文本方向 <big>大号字体加粗 <br>换行 <cite>引用进行定义 <code>定义计算机代码文本 <dfn>定义一个定义项目 <em>定义为强调的内容 <i>斜体文本效果 <img>向网页中嵌入一幅图像

HTML————行级元素和块级元素标签

块级标签:(block) 1.独占一行,不和其他元素待在同一行,宽度自动填满父元素宽度 2.能设置weight(宽).height(高)属性 3.可以设置margin,padding属性 常见的块级标签: <address>,定义地址 <caption>,定义表格标题 <div>,定义文档中的分区或节 <dl>,定义列表 <dt>,定义列表中的项目. <fieldset>,定义一个框架集 <form>,创建HTML表单 &

微信小程序布局之行内元素和块级元素

元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制. 块级元素特点总结: 1.总是在新行上开始 2.宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好等于父级元素的内容区域宽度,即父元素的width.当设定新的宽度,如果宽度是100%,并且padding.margin不为零,导致块级元素宽度溢出父元素 3.盒子模型的高度默认由内容决定 4.盒子模型中高度.宽度和内外边距都是可控制

python四种方法实现去除列表中的重复元素

转载:https://blog.csdn.net/together_cz/article/details/76201975 def func1(one_list): ''''' 使用集合,个人最常用 ''' return list(set(one_list)) def func2(one_list): ''''' 使用字典的方式 ''' return {}.fromkeys(one_list).keys() def func3(one_list): ''''' 使用列表推导的方式 ''' tem