HTML基础 (一)
全文手打，转载请注明出处
全文手打，转载请注明出处
全文手打，转载请注明出处
五大主流浏览器：IE，FireFox，Chrome（谷歌），Opera，safari（苹果）
浏览器内核组成：渲染引擎、JS引擎
Trident（IE），Gecko（FireFox），Blink（Chrome/Opera），Webkit（safari）
国内大多数浏览器双核驱动：Trident&Webkit 或 Trident&Blink
移动端：iphoe/ipad是Webkit内核，android4.4以下采用Webkit内核，android4.4以上采用Blink内核
一）HTML文档结构
<!DOCTYPE html> //!表声明，声明下面的文档标签将以html5规范进行解析 <html> //头部，主要用来完成一个网页的相关设置 <head> <meta charset="utf-8"> //汉字编码，meta：元，用来完成对应设置 <meta name="keywoeds" content=""> //设置网站的搜索关键字，网站在不付费的情况下，尽量往前靠 <meta name="description" content="网站描述内容"> //网站描述内容 <title>我的html</title> //标题 <link rel="shortcut icon" href="tupian.png" type="image/png"> //设置网站小图标 <style> //样式CSS </style> <link rel="stylesheet" href="style.css"> //引入单独的样式文件 </head> //主体部分 <body> <p>段落</p> //大量标签 </body> <script> //JavaScript脚本语言，逻辑运算 </script> </html>
二）HTML基本标签
!+tab html:5+tab 自动生成文档结构
<div> //div用于布局，块级标签，独占一行 <div>div1</div> <div>div2</div> </div>
<span>span1</span> //作用和div一样，用于布局，行级标签，不会独占一行 <span>span2</span> <h1>十一天</h1> //1到6级，1级最大，默认字号，会自动加粗 <h6>加油</h6>
<p></p> //段落，相当于回车 <br> //换行，单标签 <br />
<hr /> //生成1条水平线，单标签 <hr width = "80%" align = "center" color = "red" height = "2px" />
<a></a> //超链接，href，targe，ttitle <a href = "http://baidu.com" title = "鼠标放上去提示文字">百度</a> <a href = "http://baidu.com" target = "_blank">百度</a> //单独起窗口，打开链接 <a href = "http://baidu.com" target = "_self">百度</a> //当前窗口打开链接
<img> //用来加载外部图片、图像，src，alt，title <img src = "shangpin/jpg" alt = "商品" title = "test"> //图片加载不成功时，显示alt的提示 <img src = "./img/jpg" alt = "商品" title = "test"> //同一目录下的jpg文件
<ul> //无序列表，前面是点，哪个排前面无所谓 <li>li1</li> <li>li2</li> <li>li3</li> </ul> <ol> //有序列表，1，2，3 <li>li01</li> <li>li02</li> <li>li03</li> </ol>
<!-- --> //注释，快捷键ctrl+shift+/，浏览器不解析注释的内容
三）标签属性
//属性名="属性值" //起附加信息的作用 //不一定要加属性，比如<br>无属性 <p title="段落" class = "content" id = "content">测试段落</p>
四）文本格式化标签
//通过标签美化文本外观 //行级标签：不会自动换行，不识别宽高 //块级标签：独占1行，识别宽高 //b和strong：加粗，但strong还有强调作用：强调用于SEO搜索引擎优化时，提取关键字 <b>加粗</b> <strong>加粗且强调</strong> //都是行级标签 //i和em：使文字倾斜，em具有强调作用 <i>倾斜</i> <em>倾斜且强调</em> //都是行级标签 //pre：预格式化文本，保留换行和空格及宽度 <pre>哈哈 //块级标签 空格 </pre> //保留格式，文字字号会小一号 //small和big：文字缩小及放大，浏览器支持的最小字号为12px，显示更小的字需做处理 <p>正常大小文字</p> <small>小1号文字</small> //都是行级标签 <big>大1号文字</big> //big在html5中淘汰掉了，但并没有删除，尽量不要使用 //sub和sup：设置文本为下标bottom和上标up <p>X1+X2=Y</p> <p>下标：X<sub>1</sub>+X<sub>2</sub>=Y</p> <p>上标：Z<sup>1</sup>+Z<sup>2</sup>=Y</p>
五）单双标签
//单标签，闭合 <br /> //换行 <hr /> //水平线 <img /> //图片 <input /> //文本 <link /> //link <meta /> //元信息 //双标签 <div></div>
六）html实体转义
<p> aa </p> //页面只解析1个空格
<p> aa </p> // 表1个空格
<p>1×2</p> //×表✖
七）块级元素（块级标签）和行级元素（行级标签 内联元素）
块级元素：★会独占一行 行级元素：★不会独占一行，
★宽度会自动填满 ★相邻的行级元素排列在同一行内
★可设置宽width高height ★设置宽width高height无效
★内部可包含块级元素和行级元素 ★内部只包含行级元素
块级元素相当于执行（display:block）显示：块 （display:inline）显示：行
//div，p块级元素
<div>div</div> //占满1行，自带宽度
<p>p</p>
<p style = "width:300px;height:50px;background:grap;">p</p>
//strong，span行级元素
<strong>strong</strong>
<span style = "width:300px;height:50px;background:grap;">span</span> //只颜色显示，宽高不好用
//标签转换
<p style = "width:300px;height:50px;background:grap;display:inline;">块级标签转为行级标签</p>
<span style = "width:300px;height:50px;background:red;display:block;">行级标签转为块级标签</span>
块级标签：div,p,h1-h6,ul,ol,pre,table,address等
行级标签：span,a,b,strong,i,em,sup,sub
img：行级块标签，相当于执行了display:inline-block，虽是行标签，可设置宽高
八）W3C
W3C万维网联盟（World Wide Web）：统一web相关的各项标准
★①块级可包含块级和行级，，行级只可包含行级
★②p，h1-h6，dt标签里不能放块级，，<p><div></div></p> 错
★③块与块并列，行与行并列，，<div><h2></h2><p></p></div> 对
<div><h2></h2><span></span></div> 错
九）一些标签
<q>短文本引用</q> //“短文本引用”
<address> //加地址信息，倾斜效果
<p>电话：123456</p>
<p>住址：你家附近</p>
</address>
<table border = "1">
<caption>学生信息表</caption> //为表格添加标题和摘要
<tr>
<th>学号</th> //th表头
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>003</td>
<td>张三</td>
<td>14</td>
</tr>
</table>
十）文件命名规则
★项目文件或目录中不能出现汉字和空格，一般以字母和下划线开头，其后可出现字母、数字、下划线
★目录名：taobaopro 图片：images/img/pic 视频：video 音频：music 文件：file 网页文件：web
★文件名：首页index.html 产品页：product.html 订单页：order.html 详情页：order_details.html
