一、走进Web开发

Web运行的原理：

二、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的文档结构

2.2 html的注释

<!--注释内容-->

2.3 代码的规范

HTML标记不分大小写，建议小写。如：<font>,<Font>,<fOnt>

HTML标记属性可有可无，有的标记没有属性。如:<html>,<head>,<title>等

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

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

2.4 标记分类

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

语法: <标记名称 属性=”值”  属性2=”值2”/>

例： <img src=”图片在服务器的地址，盘符/文件夹/文件名”/>

<ing src=”d:/php07/images/01.jpg”/>

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

语法：<标记名称 属性=”值”>要修饰的内容</标记名称>

例：  <div>内容</div><font color=”red”>文本</font>

2.5 body的属性

Bgcolor：背景的颜色    例：<body bgcolor=”颜色”>

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

<body bgcolor=”green”>   (单词)

<body bgcolor=”#ba06be” (十六进制,由0~f字符组成的六个字符）

<body bgcolor=”rgb(0,0,0)”  (rgb，三原色，从0-255组合）

Background：背景图片     例：<body background=”图片的地址”>

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

2.6 文本修饰标记

<font></font>:文本的修饰       例：<font>文本</font>

Font的标记属性：

Color:文本的颜色      值：颜色

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

<i></i>: 斜体

<b></b>: 加粗

<u></u>: 下划线

<s></s>: 删除线

<sub></sub>: 下标

<sup></sup>: 上标

2.7 排版标记

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

<hr>:水平线

Hr常用的属性

Size:粗细    值:1~100

Color:颜色   值:颜色

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

<h1>~<h6>标题标记：--->自动换行和加粗

<p></p>:段落标记

<pre></pre>:预排班标记--->代码怎么写，显示出来就是一样的。

2.8 div和span标记

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

语法：<div>任何元素</div>

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

语法：<span>要放入的元素</span>

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

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

例：<div>我是<font color="red">div</font></div>

3.0 无序列表

语法：<ul>

<li></li>

<li></li>

<ul>

属性：type     值类型：diss   square  circle

3.1 无序列表

语法：<ol>

<li></li>

<li></li>

</ol>

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

static：数值

例：<ol type="a"  start="3">

3.2 图片标记

语法：<img 属性="值"   属性="值"  属性="值"/>

常用属性：

src：图片的地址

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

width：图片的宽度

Height：图片的高度

border：图片的边框

Align：图片的对其方式

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

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

3.3 图片的热点

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

Rect：矩形     坐标：右上角，左下角

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

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

Href：跳转的地址

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

3.5 滚动标记

语法：<marquee>要滚动的元素</marquee>

常用属性：

Direction：滚动的方向

width：滚动宽度

height：滚动高度

Bgcolor：背景颜色

Scrollamount：滚动步长值，值越大，滚动越快

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

Loop：滚动的次数

3.6 多媒体标记

语法：<embed></embed>

常用的属性：

src：多媒体地址                值：路径

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

height：调整高度              值：数字

HTML的文档结构与语法（一）的更多相关文章

  1. HTML的文档结构与语法（二）

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

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

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

  3. HTML5的文档结构

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

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

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

  5. 简体中国版文档的Markdown语法

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

  6. HTML5的文档结构和新增标签

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

  7. Mongodb：修改文档结构后出现错误：Element '***' does not match any field or property of class ***.

    Mongodb:修改文档结构后出现错误:Element '***' does not match any field or property of class ***. Mongodb是一种面向文档的 ...

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

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

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

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

随机推荐

  1. rhel7 系统服务——unit（单元）

    Linux内核版本从3.10后开始使用systemd管理服务,这也是系统开机后的第一个服务.systemd通过unit单元文件来管理服务. 它保存了服务.设备.挂载点和操作系统其他信息的配置文件,并能 ...

  2. 设计模式课程 设计模式精讲 20-2 解释器模式coding

    1 代码演练 1.1 代码演练1(解释器模式coding) 1.2 代码演练如何应用了解释器模式 1 代码演练 1.1 代码演练1(解释器模式coding)(该案例运用了栈的先进先出的特性) 需求: ...

  3. gets和scanf区别

    scanf 和 gets 读取字符串 深入了解scanf()/getchar()和gets()等函数 scanf与gets函数读取字符串的区别 今天看到一段话,大致是说gets比scanf()快,有点 ...

  4. 本机连接虚拟机中docker启动的mysql数据库

    首先要保证本机能访问虚拟机的网络 并且虚拟机开通了mysql的访问端口 进入容器 docker exec -it 容器id /bin/bash 进入mysql数据库开启远程访问权限 mysql -ur ...

  5. Scrapy 使用 Item 封装数据、使用 Item Pipline处理数据

    1.Item 和 Field Scrapy 提供一下两个类,用户可以使用它们自定义数据类,封装爬取到的数据: (1)Item类 自定义数据类(如 BookItem)的基类 (2)Field 用来描述自 ...

  6. 八 SpringMVC文件上传，必须设置表单提交为post

    1 修改Tomcat配置,本地目录映射 那么在server.xml中体现为: 测试一下是否设置成功: 2 引入jia包   3 配置多媒体解析器 3 jsp开启图片上传 4 Controller层设置 ...

  7. 怎样实现android 返回到上一个Activity并重新执行一次onCreate方法

    1.onCreate 方法只在activity一开始创建的时候执行.2.也就是在该activity销毁后才能再次执行,假如当前activity上再打开一个activity,并且原来的activity已 ...

  8. 十三、$.ajax、模态/非模态框、window.open()、href属性、submit()等提交请求优劣及问题解决方法

    1. $.ajax提交请求进行数据更新,并通过回调进行有效提示 function updateAudit(dispacher, control) { var currentpage = documen ...

  9. 「NOIP2015」斗地主

    传送门 Luogu 解题思路 给你们一张搜索顺序图,然后就大力模拟就好. 细节注意事项 爆搜题,你们懂的... 参考代码 写的有点丑了,洛谷上只能过加强版的88分,会T六个点 #include < ...

  10. php 实现店铺装修7

    type_id=0的情况 type_id=1的情况                         type_id=2的情况 /** * @title 店铺装修--商品分类 * @param type ...