DTD文档类型和HTML基础元素

最新推荐文章于 2021-06-03 05:30:15 发布

麦票

最新推荐文章于 2021-06-03 05:30:15 发布

阅读量335

点赞数

分类专栏：学习日记文章标签： html5 前端

本文链接：https://blog.csdn.net/weixin_39057358/article/details/72872595

版权

学习日记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、什么是HTML？

超文本标记语言
包含了头部（head）和主体（body）两大部分
head 主要是浏览器和搜索引擎看的
body 用户主要看到的内容都在这

二、什么是DOCTYPE？

它是文档类型声明（HTML文档），它一般写在文档的第一行，html标签之前。
DOCTYPE分为html5类型和html4类型
html5 所有html类型的文档都用这种方式定义
html4 三种类型：严格，过度，框架。90%在使用的都是过度类型。

三、HTML的基础标签

——html的基本结构

<!DOCTYPE html>
<html>
    <head>
        <mate charset="UTF-8" />
        <title></title>
    </head>
    <body>
    </body>
</html>

常见基本标签：

body bgcoclor 背景颜色 background背景色

h1~h6 标题 align的属性值 left center ringht
justify两端对齐，通过firebug可以和left对比出效果

p标签里面的空格和换行会被浏览器自动忽略，可以加
让它换行

这是一个段落，
这又是一个段落

span标签一般放一些短小的文字，或是结合背景图片做一些效果

div布局里面包含了一组元素，可将页面切分为不同的部分
br 换行符
hr 水平分割线 width=”50%” size=”20” align=”center”

格式标签

address 文档的联系信息，地址斜体显示

b标签粗体效果

del标签删除的效果

em 强调斜体

i 纯粹的斜体显示文本

pre 标签会保留空格和换行

small标签小号字体

big标签大号字体

strong 强调显示为粗体 strong>em

u标签一个下划线

sup 上标

sub 下标

图像标签img
alt=”无法显示的提示” title=”鼠标划过显示文字”
src=”图片的路径” width=”100” hight=”100”（单位不写默认为px）
border边框 align和h标签汇总的用法不同，需要和文本作为参考来显示

a href=”” 没有href无法跳转到链接页面 title=”“鼠标划过
如果href里的属性值为#，那么它指的是跳转到页面顶部
target属性定义了链接以什么方式打开 target=”_blank”在新的页面打开

列表

有序无序定义
ol 定义一个有序列表

a A i I

ul 定义一个无序列表

disc实心圆 cicle空心圆 square方块

dl定义列表

第一章

1小节

2小节

3小节

块元素和行元素

一般html页面中的元素分为两种，一种是块元素一种是行元素
【块元素和行元素的区别】
1、块元素独占一行，它可以设置宽和高；在未设置的情况下，块元素已浏览器的宽为宽
2、一行可放置多个行元素，不可以设置宽和高，img除外，行元素以元素内容的宽和高为准

常见的行元素和块元素

内联元素(inline element)
* a - 锚点
* b - 粗体(不推荐)
* big - 大字体
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片(行内元素，但可设置宽高)
* label - 提示标签
* select - 列表选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* u - 下划线

块元素(block element)
* address - 地址
* div - 常用块容器
* dl - 定义列表
* fieldset - 元素集
* form - 交互表单
* h1 - h6 标题
* hr - 水平分隔线
* ol - 有序列表
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 无序列表
input 是行内块元素