html 学习 骨架 常用标签

html 骨架

   sublime 输入 html：5  再按tab按键  可快速生成骨架
   或者 输入 ！再按tab 按键  也可以快速生成 骨架
	
   html:xt 可生成 html4 版本的骨架

两个标签

  <! DOCTYPE html>
  告诉我们当前用的是哪个html 版本 用的是 html5

 <meta  charset = “utf-8” > 
 表示使用什么编码集

熟记的标签

标题

   <h1> <h2> <h3> <h4> <h5> <h6> 

eg:

2

3

4

5

7

8

段落

   <p> </p>

eg:

aasdfasdfasdfasdfasdfasdfadsfasdfasdfadsf

asdfasdfadfasdfadfadfadsfadf

水平线

  <hr />

eg:

---

换行

 <br />

eg:
asdfasdf
asdfasdfadf

重要两个标签 div span

<div> </div>
<span> </span>

eg:

adfadf

asdfasdfasdf

文本格式化标签

粗体

 <b></b> 
 <strong></strong>  XHTML 中推荐使用这个标签

eg:
aaaaa
bbbbbb

斜体

<i></i> 
<em></em>

eg:
aaaaa
bbbbb

加删除线

<s> </s> 
<del></del>

eg:
aaaa
bbbbbb

加下划线

<u></u>
<ins></ins>

eg:
aaaa
bbbbb

图片

一、基本方法

<img src= "xxx.png" />

eg:

二、带alt 的图像

<img src = "xxx.jpg" alt = "这是一个开始图片" >   ###  alt 后边跟 提示信息

eg:

三、带title 的图像

<img src = "xxx.jpg" title = "华为mate 40 " >   ###  鼠标悬停时显示的内容

eg:

四、带宽度 的图像

<img src = "xxx.jpg"  width= "500 " >   ###  修改图片的宽度 会等比例缩放

eg：

五、带边框 的图像

<img src = "xxx.jpg"  border= "10 " >   ###  修改边框宽度

eg：
### 修改边框宽度

链接标签

定义：
<a href= "跳转目标" target = “目标窗口的弹出方式” >内容 文本或图像 </a>

注意：
暂时没有确定的链接地址时 可以用#号代替
 <a href= "#" target = “目标窗口的弹出方式” >内容 文本或图像 </a>
 
 目标窗口的弹出方式：
  <a href= "#" target = “_blank” >内容 文本或图像 </a>
  target = “_blank”  窗口会以新窗口的方式打开

eg：
内容 文本或图像
target = “_blank” 窗口会以新窗口的方式打开

锚点定位

<a href = "#live" >链接名称</a> 
<h3 id = "live"></h3>

两个标签配合 可以实现跳转的功能

eg：
链接名称

base标签

<base target = "_blank"/> 为后续其他标签统一设置 弹出窗口方式

特殊字符

空格 ： &nbsp；
<      :    &lt;
>      :    &gt;

eg:

注释

 <!-- 注释内容  --> 

列表标签

一 无序列表

<ul>
	<li>a</li>
	<li>d</li>
	<li>a</li>
	<li>a</li>
	<li>a</li>
	<li>d</li>
	<li>d</li>
</ul> 

效果如下：

• a
• d
• a
• a
• a
• d
• d

注意：   <ul> 标签 里边只能放 <li>标签
             <li>  标签 里边 可以放所有标枪
			<ul>
				<li>
					<img src="xxx.png” alt="第一张图片" >
				</li>
				<li>
					<img src="xxx.png“ alt="第二张图片" >
				</li>
				<li>
					<img src="xxx.png” alt="第三张图片" >
				</li>
				<li>
					<p>一段文字</p>
					<a href = "#" >链接</a>
				</li>
			</ul>   

eg：

• 
  
• 
  
  
• 
  
• 
  <img src = "xxx.png” alt = “第二张图片” >
  
• 
  
• 
  <img src="xxx.png“ title=“第三张图片” />
  
• 
  
• 
  

  一段文字

  
  链接
  
• 
  

二、有序列表

 <ol>
	<li>中国</li>
	<li>美国</li>
	<li>日本</li>
</ol> 

eg：

1. 
   
2. 中国
3. 
   
4. 美国
5. 
   
6. 日本
7. 
   

自定义列表

<dl>
	<dt>北京</dt>
	<dd>昌平</dd>
	<dd>通州</dd>
	<dd>顺义</dd>
	<dd>海淀</dd>
</dl>

eg：

北京

昌平

通州

顺义

海淀