一、走进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. Python - Mro

    参考 https://stackoverflow.com/questions/2010692/what-does-mro-do http://python.jobbole.com/85685/ 问题: ...

  2. RF之变量的共享使用与python测试库-5

    RF申明变量: 首先我们要创建Variables表 *** Settings *** ${LoginUrl}      http://cloud.innovpowerf.com/Account/Log ...

  3. JavaScript引用类型与对象

    1.引用类型 引用类型的值(对象)是引用类型的一个实例.引用类型有时候也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法. 对象是某个特定引用类型的实例.新对象是使用new操作符后跟一个构造 ...

  4. jqGrid 重新加载数据

    参考:https://blog.csdn.net/u012746051/article/details/52949353 $("#列表区域id").jqGrid('clearGri ...

  5. POJ 2947：Widget Factory 求同余方程

    Widget Factory Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 5173   Accepted: 1790 De ...

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

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

  7. 在vnware中配置好redis后，不能使用图形化工具打开

    1.先检查防火墙的状态 通过systemctl status firewalld查看firewalld状态,发现当前是dead状态,即防火墙未开启 通过systemctl start firewall ...

  8. SciPy 优化

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  9. zabbix_get工具基础使用

    zabbix_get工具基础使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.zabbix_get工具概述 我们在使用zabbix server监控zabbix agent端 ...

  10. 第十届蓝桥杯 RSA解密（C++/ java）

    一道不错的题目,借鉴了网上的代码,用了拓展欧几里得算法求逆元,再用快速乘求每次a的余数,再快速幂对余数进行幂运算. #include <bits/stdc++.h> using names ...