HTML基础——文档结构和基本语法

最新推荐文章于 2023-05-17 22:00:00 发布

fengku1

最新推荐文章于 2023-05-17 22:00:00 发布

阅读量722

点赞数

分类专栏： HTML基础文章标签： html

本文链接：https://blog.csdn.net/fengku1/article/details/127195940

版权

HTML基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.HTML文档基本结构

一个完整的HTML的文档基本结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE>命令声明文档的类型，是HTML文档必不可少的部分

<html>和</html>里面内容是整个语法的开始和结尾

<head>和</head>是该html的头部信息，包含有：编码方式，网页的名字等，从HTML5开始推荐编码使用UTF-8

<body>和</body>里面是主题信息，包含网页显示内容

2.HTML元素

2.1 结构元素

结构元素用于构建网页文档结构，多指块状元素

div：在文档中定义一块区域，即为包含框，容器

ol ：按一定顺序排序的列表，通常和li一起使用

ul ：无序列表，通常和li一起使用

li ：每条列表项，

dl：一定义的方式进行列表

dt：定义列表的词条

dd：对定义的词条进行解释

del：定义删除的文本

ins：定义插入的文本

h1~h6：标题1到标题6，定义不同级别的标题

p：定义段落结果

hr：定义水平线

header：页面中一个内容区块或整个页面标题

footer：整个页面或者页面中一个区块的脚注；一般来说，会包含创作者的姓名、日期、联系方式等

section：页面的一个内容区块，如章节、页眉、页脚等，可与h1~h6等元素结合使用

article：页面的一块与上下文不想管的独立内容，如博客中的一遍文章或报纸中的一遍文章

nav：页面导航链接部分

aside：article袁术的内容之外的，与article元素内容相关的辅助信息

main：网页主要信息

2.2 内容元素

一般指文本格式化元素，多是行内元素

span：文本行中定义一块区域，行内包含框

a：超链接

abbr：定义缩写词

address：定义地址

dfn：定义术语，以斜体显示

kbd：定义键盘键

samp：定义样本

var：定义变量

tt：定义打印机字体

code：定义计算机源码

pre：定义预定义格式文本，保留源代码格式

blockquote：大块内容引用

cite：引文

q：短语

em定义文本为重要内容

2.3 修饰元素

文本显示效果，这里只写一些常用的

b：粗体 small：文本缩小显示 sup：上标 sub：下标

i：斜体 u：下划线 center：居中 font：字体样式、大小、颜色

big：大文本 strike：删除线

2.4 功能元素

video：定义视频

<video src="xxxx.ogg" controls="controls">视频元素</video>

audio：音频

<audio src="xxx.wav" >音频元素</audio>

embed：用来出入各种多媒体元素，格式可以是Midi，Wav，MP3等

<embed src="xxx.wav" />

canvas：表示图形，本身没有行为，只提供一块画布，但他吧一个绘图API展示给客户端的JavaScript，使脚本能够把想绘制到这块画布

3. HTML属性

3.1核心属性

class：类规则/样式规则

id：元素的唯一标识

style：袁术样式申明

3.2 语言属性

lang：元素的语言代码或编码

dir：文本方向，包括ltr、rtl取值分别表示从左向右或从右向左

3.3 键盘属性

accesskey：访问某元素的快捷键，使用accesskey可使用Alt+zimu访问指定URL

tabindex：元素的Tab建索引编号

    <a href="#" tabindex="1">Tab 1</a>
    <a href="#" tabindex="3">Tab 3</a>
    <a href="#" tabindex="2">Tab 2</a>

3.4 内容属性

包含内容的福建信息，这些信息对于元素来说具有重要补充作用，避免元素本身包含信息不全而被误解

alt：定义元素的替换文本

title：元素的提示文本

cite：元素内容引用信息

datetime：元素包含内容的日期和时间

3.5 表单属性

autofocus：以指定属性的方式让元素在画面打开时自动获得焦点

placeholder：对用户的输入进行提示，提示用户可以输入的内容

form：申明属于哪个表单，放置在页面任何位置

required：用户提交时进行检查，检查该元素内一定要有输入内容

。。。。。。

3.6 其他属性

rel：当前页面与其他页面的关系；表示从源文档到目标文档的关系

rev：其他页面与当前页面之间的链接关系；表示从目标文档到源文档的关系

3.7 全局属性

contentEditable：主要使允许用户可以在线编辑元素里面内容

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

<h2>可编辑列表</h2>
<ul contentEditable="true">
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li>列表元素3</li>
</ul>

该属性还有一个隐藏的inherit（继承）状态，为Ture，元素被指定可编辑，反之，则不可编辑，若未指定则看父元素的状态；

元素修改后，如果想要保存内容，只能将该元素的inner HTML发送到服务器端进行保存，因为改变元素内容后该元素inner HTML内容也随之改变

contextmenu：用于定义<div>元素的上下文菜单。上下文菜单在用户右键单击元素时出现。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div contextmenu="mymenu">上下文菜单
    <menu type="context" id="mymenu">
        <menuitem label="微信分享"></menuitem>
        <menuitem label="微博分享"></menuitem>
    </menu>
</div>
</body>
</html>

draggable：定义元素是否可以被拖动

取值如下：

Ture：可拖动 false：不可拖动 auto：使用浏览器默认行为

dropzone：属性定义在原始上拖动数据时，是否复制、移动或链接被拖动数据；取值如下：

copy：拖动数据会产生被拖动数据副本

move：拖动数据会导致被拖动数据被移动到新位置

link：拖动数据会产生指向原始数据的链接

hidden：取值true，元素不可见；取值false，元素可见

spellcheck：是否对元素进行拼写和语法检查；可对以下内容进行拼写检查：

input元素中的文本值

<textarea>元素的文本

可编辑元素的文本

代码为：拼写检查的可编辑段落

<p contenteditable="true" spellcheck="true">这是一个段落。</p>

translate：是否翻译该元素内容；取值yes，应该翻译元素内容；取值no，不翻译

注意：目前所有著浏览器都无法正确至此translate属性

fengku1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础——文档结构和基本语法

HTML基本结构元素及其属性用法
复制链接

扫一扫

专栏目录