YiShuizhou

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      占位符&nbsp;
2      版权所有 &copy; 
3      注册商标  &reg 
4      小于号&lt;
5      大于号 &gt;
6      英文双引号 &quot; 
7      人民币  &yen; 

 

 

 

 

 

 

 

分类:

技术点:

相关文章: