html语言文档结构,HTML的文档结构与语法(一)

一、走进Web开发

Web运行的原理:

a201e6a581b48c64d408aa724b375289.png

二、HTML

1.1什么是html

HTML是用来描述网页的一种语言

HTML指的是超文本标记语言(Hyper Text Markup Language)

超文本就是网页上不光有文本,还有图片,音乐,视频等

标记语言是一套标记标签(markup tag) div,span,font,i等标记

HTML使用标记标签来描述网页

HTML文档包含了HTMl标签及文本内容

HTML文档也叫WEB页面

HTML的主要目的:通过一系列标签,来显示网页的不同效果,不同部分

2.html的核心标记

2.1 html的文档结构

3e77c4d6fd6d0cdad28c9ae0f0a68354.png

2.2 html的注释

2.3 代码的规范

HTML标记不分大小写,建议小写。如:,,

HTML标记属性可有可无,有的标记没有属性。如:,

,等

双标签的内容在开始和结束标签之前,单标签没有内容

HTML标签可以互相嵌套,但一定要注意顺序嵌套,外层套内层,一层套一层

2.4 标记分类

单标记:标记只有一个,不是修饰内容的而是显示某个功能的,如果有图片,设置编码,设置关键字等。

语法:

例: %E6%96%87%E4%BB%B6%E5%90%8D%E2%80%9D

双标记:是修饰内容的标记,有开始有结束标记,中间要写修饰内容。

语法:要修饰的内容标记名称>

例: 

内容
文本

2.5 body的属性

Bgcolor:背景的颜色    例:

颜色:十六进制、单词、rgb方式

Background:背景图片     例:

用background设置的图片必须与背景相同大小

2.6 文本修饰标记

:文本的修饰       例:文本

Font的标记属性:

Color:文本的颜色      值:颜色

Size:文本的大小       值:1~6

: 斜体

: 加粗

: 下划线

: 删除线

: 下标

: 上标

0ac474ed3b90ff3a099b4a6a6187b3cc.png

2.7 排版标记


:换行,在需要换行的标记后面添加br标记就可以了。


:水平线

Hr常用的属性

Size:粗细    值:1~100

Color:颜色   值:颜色

Width:宽度  值:数值(固定)或百分比(根据浏览器窗口大小自动调整)  百分比一般用于响应式网站开发。

~

标题标记:--->自动换行和加粗
:预排班标记--->代码怎么写,显示出来就是一样的。 
 

2.8 div和span标记

div:是双标记,没有任何意义的块元素,用的最多和css配合使用,一般为“div+css”

语法:

任何元素

span:是双标签,没有任何意义的行内元素,用的最多和css配合使用。

语法:要放入的元素

块元素:不管内容有多少,都会占整个浏览器的一行,一般都是用块元素布局

行内元素:内容多少就占多少,一般都是行内元素嵌套到块元素中

例:

我是 div

3.0 无序列表

语法:

  • 属性:type     值类型:diss   square  circle

    3.1 无序列表

    语法:

属性:type :A,a,i,I,1

static:数值

例:

3.2 图片标记

语法:

常用属性:

src:图片的地址

Alt:来代替图片没有显示时的描述

width:图片的宽度

Height:图片的高度

border:图片的边框

Align:图片的对其方式

Hspace:图片与文字的左右距离

Vspace:图片与文字的上下距离

023a1fed6b1c9bd7850042568b43e81a.png

3.3 图片的热点

功能:在图片中添加可以点击的链接

7240185ff2132137acbed91ccbecd28f.png

Rect:矩形     坐标:右上角,左下角

circle:圆形    坐标:中心点和坐标半径

poly:多边形  坐标:每两个数字为一点

Href:跳转的地址

Target:打开新链接的方式     值:_blank 新窗口   _self原窗口  _parent父窗口  _top顶级框架

3.5 滚动标记

语法:要滚动的元素

常用属性:

Direction:滚动的方向

width:滚动宽度

height:滚动高度

Bgcolor:背景颜色

Scrollamount:滚动步长值,值越大,滚动越快

Scrolldelay:两步的停留时间,以毫秒为单位,一秒=1000毫秒

Loop:滚动的次数

3.6 多媒体标记

语法:

常用的属性:

src:多媒体地址                值:路径

width:调整多媒体宽度     值:数字

height:调整高度              值:数字

HTML的文档结构与语法(二)

3.7 超链接标记 语法:对当前链接的描述     作用:网页进行跳转 常用的属性: Href:链接的网址或ip或地址    值:就是具体的地址 T ...

Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构

分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...

HTML5的文档结构

HTML5的文档结构 HTML5简化了许多,它的设计遵循了3个原则:1.兼容性.2.实用性.3.通用访问性     1. header 元素     标签定义文档或者文档 ...

HTML的概念和三大基石以及标准文档结构

HTML的概念: 概念:  HTML:超文本标记语言 作用:  需要将java在后台根据用户请求处理的请求结果在浏览器中显示给用户.  在浏览器中数据需要使用友好的格式展示给用户.  HTML是告诉浏 ...

简体中国版文档的Markdown语法

Markdown文件 注意︰这是简体中国版文档的Markdown语法.如果你正在寻找英语版文档.请参阅Markdown︰ Markdown: Syntax. Markdown: Syntax 概述 哲 ...

HTML5的文档结构和新增标签

一.HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...

读取XML文档结构并写入内容

1.在项目中新建XML文档结构.xsd文件,在其中添加相应的节点. 2.读取文档结构并写入内容 string initFileName = @"D:\Config.xml"; Da ...

MFC开发上位机到底用Dialog结构还是文档结构?

最近要跟着导师一起开发一款大型上位机.MFC新人在考虑用对话框结构还是文档结构. 虽然说书上说大型结构的软件都需要文档结构,但是目前来看,对话框可以实现功能,并且对话框的程序更小一些,节省资源加载速度 ...

随机推荐

appium&plus;Python真机运行测试demo的方法

appium+Python真机运行测试demo的方法 一,    打开手机的USB调试模式 二,    连接手机到电脑 将手机用数据线连接到电脑,并授权USB调试模式.查看连接的效果,在cmd下运行命 ...

clock divider

一个clock的产生: 1) Clock source的选择: cgm_mux5(.clk_out, .clk_in0, .clk_in1, .clk_in2, .clk_in3, .clk_in4, ...

【转】Session ID&sol;session token 及和cookie区别

Session + Cookie  知识收集! cookie机制采用的是在客户端保持状态的方案.它是在用户端的会话状态的存贮机制,他需要用户打开客户端的cookie支持.cookie的作用就是为了解决 ...

【ES5】hideProperty

function hideProperty(host, name, value) { Object.defineProperty(host, name, { value: value, writabl ...

c&plus;&plus;的四种强制类型转换

http://hb.qq.com/a/20110722/001452.htm ...... C风格的强制类型转换(Type Cast)很简单,不管什么类型的转换统统是:TYPE b = (TYPE)a ...

c&plus;&plus; 静态多态与动态多态

多态polymorphism是指具有多种形态的情况,它能根据单一的标记关联不同的行为.多态是面向对象程序设计的基础.在面向对象程序设计中的多态是一种运行时的多态.C++中有两种多态,称为动多态(运行时 ...

在Livemedia的基础上开发自己的流媒体客户端

一.背景 二.Livemedia框架介绍 1.总体框架 2.客户端框架 2.1 客户端openRTSP流程 2.2增加一种新的媒体 2.2.1增加媒体的format 2.2.2 新媒体需要考虑的问题 ...

Android数据库高手秘籍&lpar;一&rpar;——SQLite命令

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/38461239 要想熟练地操作不论什么一个数据库.最最主要的要求就是要懂SQL语言, ...

Windows下visual studio code搭建golang开发环境

Windows下visual studio code搭建golang开发环境 序幕 其实环境搭建没什么难的,但是遇到一些问题,主要是有些网站资源访问不了(如:golang.org),导致一些包无法安装 ...

【百度地图API】如何调整结果面板的样式?如何获取指定页码的结果?

原文:[百度地图API]如何调整结果面板的样式?如何获取指定页码的结果? 摘要: 1.你是否想自定义查询后,结果面板的显示样式? 2.数据接口每次只返回10条结果,如何取到单独每一页的结果? ---- ...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值