HTML介绍:
一.web的组成:
1.结构:HTML
2.表现:CSS
3.行为:JS
二、什么是HTML5:
html5是html的第五次重大修改的成果
三、HTML5的语法:
分为单标签和双标签:
1.双标签<标签></标签>
2.单标签:<标签 属性="属性值" 属性="属性值"></标签>
四:HTML的基本结构:
<meta charset="UTF-8"> 编码格式为万国码
1 <meta charset="GB2312">编码格式为中文 2 <meta charset="GBK">编码格式为中文
常用的标记1(独占一行的):
一、标题标签
1 <!--1.标题标签 默认加粗 一次变小 依次变小 独占一行 --> 2 <!-- 注释标签 ctrl+/ --> 3 <!-- 注释一部分 选中要注释的内容 alt+shift+a --> 4 注释内容 在编辑器里可见 在浏览器里不可见 5 <h1>一级标签</h1> 6 <h2>二级标签</h2> 7 <h3>三级标签</h3> 8 <h4>四级标签</h4> 9 <h5>五级标签</h5> 10 <h6>六级标签</h6>
二、段落标签:
1 <!-- 2.段落标签 p 拥有段落间距 独占一行 --> 2 <p>123123</p> 3 <p>123123</p> 4 <p>123123</p>
三、常用布局:
1 <!-- 3.div 常用的布局标签 曾经html=css又被称为div=css 2 可见div在html里面的地位和重要性 也是独占一行 --> 3 <div>你好</div> 4 <div>你好</div>
四、水平线:
1 <!-- 4.单标签/空标签 水平线 也是独占一行的标签 --> 2 <hr> 3 <hr> 4 <!-- 在严格模式下 代码都是一板一眼的 单标签 也要有闭合 -->
五、强制换行:
1 <!-- 5.强制换行 br 独占一行 --> 2 你<br><br><br>好
六、列表(列表都是独占一行的)
1.无序列表:
1 <!-- 无序列表 --> 2 <!-- ul有一个属性 type --> 3 <!-- 他的属性值有默认值disc实心圆/circle空心圆/square正方实体/none去除列表样式 有兼容问题 IE部分浏览器不识别 需要靠CSS解决 --> 4 <ul> 5 <li>1</li> 6 <li>2</li> 7 <li>3</li> 8 </ul> 9 10 <ul type="circle"> 11 <li>空心圆</li> 12 </ul> 13 14 <ul type="square"> 15 <li>正方形实体</li> 16 </ul> 17 18 <ul type="none"> 19 <li>去除列表样式 有兼容问题 ie部分浏览器不识别 靠css解决</li> 20 </ul>
2.有序列表:
1 <!-- 有序列表 ol --> 2 <!-- 其实ol也有一个属性type属性值有默认值阿拉伯数字A/a/I 罗马数字/i 小写罗马数字 3 ol还有一个属性 start 他的属性值永远是数字! 从第几个数字开始 就是第几个--> 4 <ol> 5 <li>周一</li> 6 <li>周二</li> 7 <li>周三</li> 8 </ol> 9 10 <ol type="A"> 11 <li>大写abc</li> 12 <li>大写abc</li> 13 </ol> 14 15 <ol type="a"> 16 <li>小写abc</li> 17 <li>小写abc</li> 18 </ol> 19 20 <ol type="I"> 21 <li>大写罗马数字</li> 22 <li>大写罗马数字</li> 23 </ol> 24 25 <ol type="i"> 26 <li>小写罗马数字</li> 27 <li>小写罗马数字</li> 28 </ol>
3.自定义列表:
1 <!-- 自定义列表 dl --> 2 <dl> 3 <dt>名词</dt> 4 <dd>名词的解释</dd> 5 </dl>
七、加粗
1 <!-- 加粗 --> 2 <b>加粗</b> 3 <strong>也是加粗</strong>
八、倾斜
1 <!-- 倾斜 --> 2 <i>以后用于阿里矢量图</i> 3 <em>倾斜</em> 4 <var>一般不用,跟二阶段var有歧义</var>
九、删除线
1 <!-- 删除线 --> 2 <s>删除线</s> 3 <del>也是删除线</del>
十、下划线
1 <!-- 下划线 --> 2 <u>下划线</u>
十一、上标
<!-- 上标 --> 这是<sup>上标</sup>
十二、下标
1 <!-- 下标 --> 2 这是<sub>下标</sub>
十三、文本标签
1 <!-- 文本标签 --> 2 <span>文本标签 没有任何特殊样式</span>
十四、超链接
1 <!-- 超链接 --> 2 <!-- <a href="链接地址">连接名称</a> --> 3 <!-- 超链接还有一个属性 target 可以决定是否另起一页打开链接 --> 4 <!-- target="_self" 默认值 当前页打开--> 5 <!-- target="_blank" 另起一页打开 --> 6 <a href="#">锚链接</a> 结合后续锚点使用 7 <a href="javascript:;">空连接 点击不会出现被点击效果</a> 8 <a href="http://www.baidu.com"><b>百度一下,你就知道</b></a> 9 <a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>
十五、插入图片
1 1<img src="图片地址" alt="图片加载错误显示的" title="鼠标滑过显示的" 2 2 <!-- 图片要放在同一站点下 --> 3 3 <!--相对路径 本地路径 图片要放在相同站点下 4 4 绝对路径 网上的路径 不联网打不开 --> 5 5 <!-- 1当 图片和html文件 在同一目录下 src="图片名" --> 6 6 <!--当html文件和图片所在文件夹在同一目录下 src="图片文件夹名字/图片名" --> 7 7 <!-- 跳出当前文件夹找到图片所在文件夹 ../ -->
十六:拓展的一些小图标
1 占位符 2 版权所有 © 3 注册商标 ® 4 小于号< 5 大于号 > 6 英文双引号 " 7 人民币 ¥