html固定dl高度_HTML入门笔记1

HTML概述：HTML 的全名是“超文本标记语言”（HyperText Markup Language），它是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。

1.HTML之父

李爵士(Tim Berners-Lee)

李爵士发明了WWW、HTML、HTTP和URL。
李爵士是万维网的开创者，他写了世界上第一个网页浏览器(WorldWideWeb)和第一个网页服务器(httpd)，同时也创建了世界上第一个网站“http://info.cern.ch/”，该网站于1991年8月6日运行，它解释了万维网是什么，并教会我们该如何使用网页浏览器和如何建立一个网页服务器。

2.HTML起手式

快捷键：感叹号 ! + Tab键

<!DOCTYPE html>                   //文档类型为HTML
<html lang="zh-CN">              //网页语言为简体中文<head><meta charset="UTF-8" />    //字符编码为UTF-8<meta name="viewport" content="width=device-width, initial-scale=1.0" />//禁止缩放，兼容手机<title>我的网页</title>     //网页标题</head><body>Hello World!               //网页内容</body>
</html>

3.章节标签

表示文章/书的层级

标题 h1~h6：h1~h6标题级数依次递减，h1级别为最高
章节 section：<section>章节元素表示一个包含在HTML文档中的独立部分，一般来说会有包含一个标题。与<article>比较而言，<section>更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以标题作为开头；也可以把一篇<article>分成若干部分并分别置于不同的<section>中，也可以把一个区段<section>分成若干部分并分别置于不同的<article>中，取决于上下文。
段落 p：<p>元素表示文本的一个段落，也被称为HTML段落元素，该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。此外，<p> 是块级元素（块级元素中可以包含块级元素和行内元素，总是从新的一行开始，高度、宽度都是可控的，宽度在没有设置时，默认为100%）。
article 文章：<article>文章元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
header 头部：<header>头部元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称等等。
footer 脚部：定义了页脚，通常包含版权或法律声明，有时还包含一些链接。在部分的情况下，页脚可能包含切片内容的发布日期，许可证信息等<article>，<section>，<aside>，和<nav>可以有自己的<footer>。尽管有其名称，但页脚不一定位于页面或节的末尾。（&copy；版权声明符号）
main 主要内容：存放每个页面独有的内容。每个页面上只能用一次<main>，且直接位于<body>中。最好不要把它嵌套进其它元素。
aside 旁支内容：包含一些间接信息（术语条目、作者简介、相关链接，等等）。
div 划分：<div>元素(或HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

代码示例

 <body><header>顶部内容</header><div><main><h1>HTML入门学习</h1><section><h2>第一章</h2><p>应该如何学习HTML，首先要了解章节标签和内容标签，然后要熟记并反复练习。</p><section><h3>第一节</h3><p>HTML中的章节标签有“标题h1~h6,章节section，段落p，文章article，头部header，脚部footer,主要内容main，旁支内容aside以及划分div"。</p></section></section></main><aside>补充知识点：李爵士被称为互联网之父</aside></div><footer>&copy;版权声明</footer></body>

效果对照

4.全局属性

所有标签都有的属性

class ：以空格分隔的元素的类名列表

class“=”效果展示

class多属性匹配

contenteditable：可以让所有元素可编辑。<div class="middle bordered" contenteditable>

用户可通过自己在页面编辑改变文档风格

hidden：隐藏，比display：block优先级高

id: 全局唯一属性，谨慎使用，不会报错

style：html 的属性，不是 css 的样式，也可以通过 js 设置，js 会覆盖 html 的 style（js 优先级最高，js>html>css）。

tabindex：控制Tab键访问的顺序。（0 是最后访问，-1 是不允许访问，优先级1>2>.....）

<div class = "middle bordered" tabindex=1>

title: 包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户。可用于溢出省略。

鼠标移动到顶部内容时会出现title中的内容

5.常用的内容标签

清除样式(写在开头的head之间)

<style>*{margin: 0;padding:0;box-sizing:border-box;}*::after, *::before{box-sizing:border-box;}h1,h2,h3,h4,h5,h6{font-weight:normal;}a{color:inherit;text-decoration:none;}ul,ol{list-style:none;}table{border-collapse:collapse; border-spacing:0; }</style>

ol+li: 有序列表，ol不能含有除li外的任何子元素

ul+li: 无序列表
dl+dt+dd: dl是描述的列表，dt是描述的对象，dd是描述的内容。

pre：显示文本中的空白符

code: 包裹的字体等宽，可以与pre搭配写代码

hr: 分割线

br: 换行

a: 超链接 target="_blank" 用于打开新窗口（常用于国内）

em: 强调，默认样式为斜体（语气）

strong: 重要，默认样式为加粗（本身内容）

quote: 内联引用

blockquote: 块级引用

html固定dl高度_HTML入门笔记1相关推荐

html缩进快捷键_HTML 入门笔记
HTML 入门笔记 HTML (HyperText Markup Language) 不是一门编程语言,而是一种用来告知浏览器如何组织页面的标记语言. HTML 可复杂.可简单,一切取决于开发者. 它 ...
html类名定义规则_HTML入门笔记1
HTML 是谁发明的? Tim Berners-Lee HTML起手式: HTML起手式 <!DOCTYPE html> <html lang="zh-CN"&g ...
html 无序列表编程一排_HTML 入门笔记
HTML是什么? 超文本标记语言(英语:HyperTextMarkupLanguage,简称:HTML)是一种用于创建网页的标准标记语言.HTML是一种基础技术,常与CSS.JavaScript一起被 ...
【HTML/CSS】从放弃到入门-笔记1
从放弃到入门1 ⇒ 从放弃到入门2 了解浏览器浏览器和服务器(了解) 浏览器是一款软件,浏览器功能:1将网页渲染出来给用户查看,2让用户通过浏览器与网页交互不同浏览器的内核不同,渲染效果会有小的差 ...
Web-HTML+CSS入门笔记
一. Web-HTML入门笔记 1.注释无法嵌套. 2.a标签:可做跳转.下载.锚点. 属性href必须有: 属性target的值: _blank:在新的标签页打开连接: _self:在当前页面打开连 ...
HTML5课堂入门笔记（完）
HTML5入门笔记一.网页设计中的软件的安装设置 1.typroa-笔记本工具(方便记录说明文档,图片等内容) 减号加空格可出现此点文件名:由基本文件名.扩展名(扩展名来确定这个文件的打开方式 ...
Pytorch快速入门笔记
Pytorch 入门笔记 1. Pytorch下载与安装 2. Pytorch的使用教程 2.1 Pytorch设计理念及其基本操作 2.2 使用torch.nn搭建神经网络 2.3 创建属于自己的D ...
HTML入门笔记案例展示(1)
一: html标签&html书写规则 Html 的标签分为如下这两种 : 单标签: 单标签一般用于特殊的含义, 例如 : <br/> 表示换行, <hr/> ...
深度学习入门笔记（一）：机器学习基础
专栏--深度学习入门笔记推荐文章深度学习入门笔记(一):机器学习基础深度学习入门笔记(二):神经网络基础深度学习入门笔记(三):感知机深度学习入门笔记(四):神经网络深度学习入门笔记(五) ...