怎样能做好网络推广?,上海网站seo设计,网站招聘栏怎么做,网站维护与建设合同推荐阅读
智能化校园#xff1a;深入探讨云端管理系统设计与实现#xff08;一#xff09; 智能化校园#xff1a;深入探讨云端管理系统设计与实现#xff08;二#xff09; 文章目录 推荐阅读HTML简介基础声明HTML标签标题段落注释水平线文本格式化标签超链接图像i…推荐阅读
智能化校园深入探讨云端管理系统设计与实现一 智能化校园深入探讨云端管理系统设计与实现二 文章目录 推荐阅读HTML简介基础声明HTML标签标题段落注释水平线文本格式化标签超链接图像img标签map标签 表格框架 HTML 简介
** 超文本标记语言**英语HyperText Markup Language简称HTML是一种用于创建网页的标准标记语言。HTML产生于1990年1997年HTML4成为互联网标准并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML预览
浅析html,.css,js区别
html
用于勾勒出网页的结构和内容
CSS
用于美化网页
JavaScript
让网页呈现动态的数据和效果jQueryweb项目基础浏览器 HTTP协议 服务器网页存到服务器上运在浏览器上
基础 声明
为了让浏览器识别html版本正确显示网页。减少中文乱码等问题。声明不区分大小写。
HTML5
!DOCTYPE html
html 4.01
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd
html 1.0
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd对于中文网页需要使用 声明编码否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码但是只要在HTML文件里写了!doctype hmtl和 浏览器将会按照utf-8编码解析网页。 不过一定要确保文档编码和meta设置的编码一定要相同。比如在记事本保存时选择编码为utf-8保存。代码无需变动。另一种改变方式可以变动meta中所设置的编码和文档编码保持一致。 utf-8和utf8的区别 “UTF-8” 是标准写法php 在 Windows 下边英文不区分大小写所以也可以写成 “utf-8”。“UTF-8” 也可以把中间的-“省略写成 “UTF8”。 在数据库中只能使用utf8”(MySQL) 在MySQL的命令模式中只能使用utf8不能使用utf-8也就是说在PHP程序中只能使用 “set names utf8(不加小横杠)”如果你加了-“此行命令将不会生效但是在 PHP 中 header 时却要加上”- ?php header(Content-Type: text/html; charsetUTF-8); ? 即 除了在命令 “mysql_query(set names utf8)” 外一律用大写UTF-8。 HTML标签
HTML标签对于大小写不敏感
等同于
。
HTML 标签是由尖括号包围的关键词比如标签分为开放标签和闭合标签。HTML 标签通常是成对出现的但也有例外,和这两个都是单独存在的本身也都是开放标签和闭合标签,不包含内容所以只是个标签。
标签内容标签单标签 等于无内容的双标签
student/双标签
student iduid/student浏览器并不会直接显示HTML标签但是通过标签来决定如何展示HTML页面的内容. 标题
标题Heading是通过 - 标签进行定义的。 h1hello/h1
h2hello/h2尽量不要使用标题这个标签来生成粗体或者大号字体这种可能会打乱原有的文档结构。 段落 标签块级元素HTML可以将文档分成若干段落。 折行不产生新段落的情况下进行换行可以借助标签 phello/p
p你好brbob/p注释
可以将注释插入 HTML 代码中这样可以提高其可读性使代码更易被人理解。浏览器会忽略注释也不会显示它们。
!--这是注释--水平线
标签在HTML页面中创建水平线可以用于分隔内容。
hello world  文本格式化标签 一些 HTML 标签除了具有一定的语义含义外还有默认的样式例如b加粗通过这些标签我们无需借助 CSS 就可以为网页中的内容定义样式。在这些具有语义和默认样式的标签中有许多是针对文本的通过这些标签我们可以格式化文本为文本添加样式例如使文本加粗、倾斜或者添加下划线等。br /文本格式化标签标签描述…加粗标签中的字体…强调标签中的内容并使标签中的字体倾斜…定义标签中的字体为斜体…定义标签中的字体为小号字体…强调标签中的内容并将字体加粗…定义下标文本…定义上标文本…定义文档的其余部分之外的插入文本…在文本内容上添加删除线…定义一段代码…用来表示文本是通过键盘输入的…定义程序的样本…定义变量…定义预格式化的文本被该标签包裹的文本会保留所有的空格和换行符字体也会呈现为等宽字体…用来表示标签中的内容为缩写形式…用来定义文档作者的联系信息被该标签包裹的文本通常会以斜体呈现并在文本前面换行…定义标签中的文字方向 … 定义一段引用的文本例如名人名言文本会换行输出并在左右两边进行缩进…定义一段短的引用浏览器会将引用的内容使用双引号包裹起来…表示对某个文献的引用例如书籍或杂志的名称文本会以斜体显示…用来定义一个术语标签中的文本会以斜体呈现 关于 和 在显示上这两个标签都可是加粗文本呢么为什么会有两个功能相同的标签呢而且好像 strong 并非个例。 首先这两个并非完全相同。比如如果使用网页阅读器阅读网页盲人使用strong 会重读b 则不会。其次从起源上来说strong 是为了在未来建设语义网而诞生的。应该知道的是html 是负责显示的标记不能表示语义。也就是说浏览器知道这个标签如何显示而不知道标签所标记的内容应该是什么含义。而 strong 在语义上走出了第一步。 示例
b这个文本是加粗的/b
br /
strong这个文本是加粗的/strongbr /
这个文本包含
sub下标/sub
br /
这个文本包含
sup上标/supbr
del这是删除线/del
brp前面是宋体dfn后面是斜体/dfn/p超链接 HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。br /**a标签来设置超文本链接**在标签a 中使用了href属性来描述链接的地址。a href链接地址链接文本/a
a href#回到顶部/a链接文本不一定是要文本可以是图片HTML其他元素都行。 target属性 使用 target 属性你可以定义被链接的文档在何处显示。
target“_blank”:在新窗口中浏览新的页面。target“_self”:在同一个窗口打开新的页面。target“_parent”:在父窗口中打开新的页面。页面中使用框架才有用target“_top” :以整个浏览器作为窗口显示新页面。突破了页面框架的限制
a hrefhttps://www.baidu.com/ target_blank
relnoopener noreferrer访问百度!/ap如果你将 target 属性设置为_blank;, 链接将在新窗口打开同时
加上relnoopener noreferrer意思是不会打开其他的网站
因为恶意病毒可能会修改你的浏览器空白页地址。。/p
id属性
id 属性可用于创建一个 HTML 文档书签.(注意id不能重复)书签不会以任何特殊方式显示即在 HTML 页面中是不显示的。
在HTML文档中插入ID:
a idtips有用的提示部分/a在HTML文档中创建一个链接到有用的提示部分(id“tips”
a href#tips访问有用的提示部分/a或者从另一个页面创建一个链接到有用的提示部分(id“tips”
a hrefhttps://www.baidu.com/html/html-links.html#tips访问有用的提示部分/a注意 请始终将正斜杠添加到子文件夹。一般情况依赖服务器配置。 主要问了区分访问的是文件还是文件夹比如访问路径为http://www.a.com/b浏览器不知道访问的是文件还是文件夹会先访问一遍确认是那种类型如果是文件夹则会加上/,重新访问地址为http://www.a.com/b/的路径。如果带后缀名http://www.a.com/b.html可以明确知道访问的是文件不需要再次请求。 图像 标签
图像由** 标签**定义。 是空标签只包含属性并且没有闭合标签。源属性src源属性的值就是图像的URL地址**Alt属性 **图像定义一串预备的可替换的文本。在浏览器无法载入图像时替换文本属性告诉读者她们失去的信息。此时浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯这样有助于更好的显示信息。高度和宽度属性height高度与width宽度属性用于设置图像的高度与宽度。
img srchttp://www.a,com/images/a.jpg alterror
width400px height400绝对路径与相对路径 1绝对路径 从盘符开始写出图片的绝对路径 C:/images/1.jpg或者/home/soft01/images/1.jpg 缺点 1.路径过长 2.不方便迁移路径易报错。 2相对路径 只需要写出图片和网页的相对位置。方便迁移简单。 1.平级 同目录下 2.下级 3.上级 照片最好全放到一个文件下里使用上级最方便 然后统一放到src下 标签 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。中的 usemap 属性可引用 中的 id 或 name 属性取决于浏览器所以我们应同时向 添加 id 和 name 属性。area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
img srcplanets.gif width145 height126 altPlanets
usemap#planetmapmap nameplanetmaparea shaperect coords0,0,82,126 hrefsun.htm altSunarea shapecircle coords90,58,3 hrefmercur.htm altMercuryarea shapecircle coords124,58,8 hrefvenus.htm altVenus
/map
//shape指的是点击区域的形状
coords指的应该是链接区域在图片中的坐标像素为单位表格
表格由 标签来定义。 table 表格声明范围tr 行td 行里的单元格tr 声明表头
表格中的标签
标签描述 定义表格定义表格的表头定义表格的行定义表格单元定义表格标题定义表格列的组定义用于表格列的属性定义表格的页眉定义表格的主体定义表格的页脚
实例
table border1cellspacing0 width30%
caption单元格间距/captiontrtdalice/tdtdbob/td/trtrtdcc/tdtddd/td/tr
/tabletable border1 cellpadding0 width30%
caption单元格边距/captiontrtdAlice/tdtdBob/td/trtrtdcc/tdtddd/td/tr
/tabletable border1trtd rowspan2 alice/tdtdbob/td/trtrtdcc/td/tr
/tabletable border1trtd colspan2bob/td/trtrtd alice/tdtdcc/td/tr
/tabletable border1caption带有标题的表格/captiontrthA/ththB/th/tr
/tabletable border1
caption多元化的表格/caption
trtdp这是一个段落/pp这是另一个段落/p/tdtd这个单元格包含一个表格:table border1
caption表格中的表格/captiontrtdA/tdtdB/td/trtrtdC/tdtdD/td/tr/table/td
/tr
trtd这个单元格包含一个列表ulliapples/lilibananas/lilipineapples/li/ul/tdtdHELLO/td
/tr
/table框架
通过使用框架你可以在同一个浏览器窗口中显示不止一个页面。iframe标签
height 和 width 属性用来定义iframe标签的高度与宽度。frameborder 属性用于定义iframe表示是否显示边框设置属性值为0可移除
iframe srcdemo_iframe.htm nameiframe_a/iframe
pa hrefhttps://www.runoob.com targetiframe_aRUNOOB.COM/a/pp因为 a 标签的 target 属性是名为iframe_a 的 iframe 框架所以在点击链接时页面会显示在 iframe框架中。/p 网页对于嵌套的设置 X-Frame-Options 这个有三个可配置值 DENY表示该网站页面不允许被嵌套即便是在自己的域名的页面中也不能进行嵌套。SAMEORIGIN表示该页面可以在相同域名页面中被嵌套展示。ALLOW-FROM uri表示该页面可以在指定来源页面中进行嵌套展示。 #### 脚本标签 标签 标签提供无法使用脚本时的替代内容比方在浏览器禁用脚本时或浏览器不支持客户端脚本时。元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时才会显示 元素中的内容
script
document.write(Hello World!)
/script
noscript抱歉你的浏览器不支持 JavaScript!/noscript
