欢迎您光临深圳塔灯网络科技有限公司！
余先生：13699882642
余先生：13699882642
余先生：13699882642
发表日期：2018-10 文章编辑：小灯 浏览次数：986
1.web标准： a.结构标准（HTML)：决定网页的内容 b.表现标准（CSS）：决定网页中内容的布局样式 c.行为标准（Javascript)：决定网页中的行为和动作（变化）
2.HTML HTML：超文本标记语言 标记语言：通过不同的标记来让网页显示不同的内容（以指定的格式）特点：标记出错不会影响其他的标记解释超文本：除了文本以外还可以标记图片，超链接、音频、视屏、flash、输入框、连接等。。。
注意：html中大小写不敏感，大小写一样，HTML，html,HtML,hTMl是一样
3.HTML文件就是后缀是.HTML的文件。可以直接用浏览器打开（展示效果）
4.HTML结构 a.HTML基本结构，一个HTML标签包含一个HTML标签和两个head和body标签 b.head中的内容除了title和icon以外，其他的都不可见 c.body中的内容一般显示在网页上，一般都是可见的
5.标签 a.用来说明HTML版本（html代表的是用的是html5）
双标签(常规标签): <标签名 属性名1:属性值1 属性名2:属性值2...> 标签内容 </标签名>
单标签: <标签名 属性名1:属性值1 属性名2:属性值2.../> 或者 <标签名 属性名1:属性值1 属性名2:属性值2...>
说明：
标签名 - 是html中已有的标签，不能自己随便命名。标签名和<以及标签名和/之间都不能有空隙
属性 - 属性和属性值之间用:连接，多个属性之间用空格隔开。所有的属性没有位置要求
标签内容 - 在开始标签和结束标签之间，标签的内容可以是任意的（可以文本也可以是其他标签）
head中的标签有：title，mate, base, link, style, script
title - 设置网页标题
meta - 设置网页元数据(单标签)
body中的标签主要用来在网页的内容中添加显示信息的
企业建站知识
推广知识
小程序
微信营销
APP开发
<!DOCTYPE html> <html> <head> <!-- 设置网页标题 --> <title>html标签</title><!-- 设置网页内容的编码方式 --> <meta charset="utf-8"/> </head> <body> 内容 </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>千峰</title> </head> <body> <!-- 1.标题标签：h1-h6 h1大标题 h2副标题 h3副标题的副标题 --> <h1>标题一</h1> <h2>标题二</h2> <h3>标题三</h3><!--2.段落标签：p 一个段落写一个p标签p标签的内容显示完后自动换行 --> <p>第一段落</p> <p>第二段落</p><!-- 3.特殊功能标签 HTML中文本中的换行、空格、tab等都是无效的（空白无效） 换行：<br> 空格：--> <p> 窗前明月光，<br> 疑是地上霜。<br> 举头望明月，<br > 低头思故乡。 </p><!--4.文字相关的标签 1，<b></b>标签/<stong></stong>标签 b标签只是单纯的文字效果加粗，strong标签有强调的意思 倾斜：i标签\em标签 i标签只是单纯的文字效果倾斜，em标签有强调的意思 水平线：<hr/> 空格：&emsp, --> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <!--列表标签分为有序列表、无序列表、自定义列表--> <!-- 1.有序列表： ol标签--代表整个列表 li标签--代表列表中的元素 --> <ol> <li>基础语法</li> <li>web前端</li> <li>web后端</li> </ol><!--2.无序列表ul标签0代表整个列表li标签-代表列表中的元素 --> <ul> <li>基础语法</li> <li>web前端</li> <li>web后端</li> </ul><!-- 3.自定义列表 dl标签-代表整个列表 dt标签-分组名 dd标签-分组中的内容 --> <dl> <dt>教学部</dt> <dd>王老师</dd> <dd>李老师</dd> <dt>后勤部</dt> <dd>老张</dd> <dd>老余</dd> </dl> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.图片标签：img 单标签 a.src属性-图片地址（可以是本地图片路径也可以是网络图片的url) 本地图片：地址可以是绝对路径也可以是相对路径，一般将图片放在img文件夹中，然后写相对路径b.title-设置图片标题(鼠标停留在图片上，显示的内容） c.设置图片加载失败后的提示 --> <!--显示一张本地图片--> <img src="../img/132577515[1].jpg"title="高宇" alt="加载失败"/><!-- 2.超链接标签：a标签 a.内容-文字/图片 b.href-跳转到的目标地址网页地址---跳转到指定的网页 --> <a href="https://www.hao123.com"> hao123 </a> <a href="https://www.baidu.com"> <img src="../img/E`JV}FC9Z`32UE]X8K28Y69.png"/> </a> <!-- b.href-跳转到的目标地址 1）目标地址-跳转到指定的位置 2）本地的html文件地址-跳转到本地的HTML对应的网页中 3）空-刷新网页 4）选择器-在当前网页中，跳转到指定的位置 --> <a href="03-列表标签.html">列表标签</a> <a href="">刷新</a> <a href="#top">回到顶部</a> <a href="#2">第二张</a> <a href="#4">第四张</a><!--c.target - 跳转方式 _self - 默认值，在当前页面加载新的网页(原网页被覆盖) _blank - 在新的页面中加载新的网页(原网页还在) --> <a href="https://www.baidu.com" target="_blank">百度一下</a> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表格</title> </head> <body><!-- 1.表格标签table标签 - 整个表格tr - 行td - 单元格2.边框相关的属性 border - 边框的宽度 bordercolor - 设置边框颜色(颜色值可以是英语单词 - red，也可以RGB对应的16进制值 - #ff0000) cellspacing - 单元格和单元格之间的间隙 cellpadding - 设置内容和单元格边框之间的间距3.背景颜色 bgcolor - 背景颜色a.作为table属性 - 设置整个表格的背景颜色 b.作为tr属性 - 设置一行的背景颜色 c.作为td属性 - 设置某一个单元格的背景颜色 --> <table border="1" bordercolor="#ff0000" cellspacing="0" cellpadding="20" bgcolor="aquamarine"> <!-- 第一行 --> <tr bgcolor="bisque"> <td>First Name</td> <td>Last Name</td> <td>Points</td> </tr><!-- 第二行 --> <tr> <td>Jill</td> <td bgcolor="green">Smith</td> <td>50</td> </tr><!-- 第三行 --> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table><br><!--4.宽度和高度 width - 设置宽度 height- 设置高度a.作用与table - 设置整个表格的宽度和高度（会按比例分配每一行和每一列的宽度和高度） b.分别设置每一行的高度和每一列的宽度 --> <!-- 应用：细线表格 第一步：设置整个表格的背景颜色(边框颜色)和每个单元格的背景颜色(表格内容的颜色)不一样 第二步：设置cellspacing的值为边框的宽度--> <table bgcolor="black" cellspacing="1" width="300" height="200"> <tr bgcolor="wheat"> <td>姓名姓名</td> <td>年龄</td> <td>性别</td> </tr> <tr bgcolor="wheat"> <td></td> <td></td> <td></td> </tr> <tr bgcolor="wheat"> <td></td> <td></td> <td></td> </tr></table><br><!--5.对齐方式 align - center(居中)/left(左对齐)/right(右对齐)a.作用于table， 让整个表格在其父标签中居中/左对齐/右对齐 b.作用于tr， 让整行中每个单元格中的内容在其单元格中居中/左对齐/右对齐 c.作用于td, 让指定的单元格中的内容居中/左对齐/右对齐--> <!-- 单独设置每一行和每一列的宽度和高度 --> <table bgcolor="black" cellspacing="1" align="center"> <tr align="right" height="40" bgcolor="wheat"> <td width="120">姓名姓名</td> <td width="100">年龄</td> <td width="70">性别</td> </tr> <tr height="80" bgcolor="wheat"> <td align="center">小明</td> <td>18</td> <td>男</td> </tr> <tr height="80" bgcolor="wheat"> <td></td> <td></td> <td></td> </tr></table> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>复杂表格</title> </head> <body><!--1.制作复杂表格的方法： a.确定表格的最大行数, 在table中用tr表示出来 b.确定每一行有多少个单元格,用td表示出来 c.确定每一个单元格是否有合并现象。如果是行合并就设置rowspan的值，如果是列合并设置colspan的值 --> <table border="1" cellspacing="0" width="600" height="400"> <tr> <td></td> <td colspan="2"></td> </tr><tr> <td></td> <td rowspan="2"></td> <td rowspan="2"></td> </tr><tr> <td></td> </tr><tr> <td></td> <td></td> <td></td> </tr> </table><br> <table border="1", cellspacing="0", width="600" height="400"><tr> <td colspan="2"></td> <td colspan="4"></td> </tr><tr> <td colspan="2"></td> <td rowspan="2" colspan="2"></td> <td colspan="2"></td> </tr><tr> <td colspan="2"></td> <td ></td> <td></td> </tr><tr> <td></td> <td></td> <td></td> <td></td> <td colspan="2"></td> </tr> </table> </body> </html>