HTML学习笔记1 特殊符号

字符集

<meta charset="utf-8">
<!-- charset常用值有：GB2312、BIG5、GBK和UTF-8，
		其中UTF-8被称万国码，基本包含了全世界所有国家需要用到的字符-->

HTML标签

        <h1>----<h6>
		<h1>一级标题</h1>
		<!-- 作为标题使用，根据重要性递减
		 一个标题独占一行-->

         <p>段落标签</p>
		 <!-- 可以把HTML文档分割成若干段落
		  文本在一个段落中会根据浏览器窗口的大小自动换行
		  段落和段落之间保有空隙-->
		  <br/>
		  <!-- 单标签  强制换行
		   简单的开始新的一行与段落不一样，段落之间会有一些垂直间距
		   <br/>标签没有间距-->

          <div>和<span>
		  <!-- <div>和<span>没有语义，都表示一个盒子用来装内容
		   <div>用来布局，一行只能放一个<div>,大盒子
		   <span>一行可以多个<span>,小盒子-->

图片img

 <img src="img.png" alt="" title="">
		   <!-- src 用于指定图像文件的路径和文件名
			alt 图像不能显示时显示的文字
			title 鼠标放到图像上显示的文字-->

路径分类	符号	说明
同一路径		图片在页面同一级<img src="img.jpg">
下一级路径	/	图片在页面下一级<img src="images/img.jpg">
上一级路径	../	图片在页面上一级<img src="../img.jpg">

文本格式化标签

语义	标签
加粗	<strong></strong>或者<b></b>
倾斜	<em></em>或者<i></i>
删除线	<del></del>或者<s></s>
下划线	<ins></ins>或者<u></u>

建议使用第一种

特殊符号

特殊符号	描述	字符的代码
	空格	&nbsp；
<	小于号	&lt；
>	大鱼号	&gt；
&	和号	&amp；
¥	人民币	&yen；
©	版权	&copy;
®	注册商标	&reg;
²	平方根	&sup2;
×	乘	&times;
÷	除	&divide;

超链接

        <a href="#maodian">锚点链接</a>
		<!-- 链接地址为最后一行所建锚点的id,点此链接可以直接跳转到我是溯琳 
		#一定要添加-->
		
		<h3>外部链接</h3>
		<!-- href 用于指定连接目标的URL地址-->
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<!-- target 打开窗口的方式 
		默认 _self 在当前窗口打开页面
		_blank 在新窗口打开页面-->
		 
		 <h3>内部链接</h3>
		 <a href="ai.html" target="_blank">ai</a>
		 <!-- 内部的HTML网页相互连接 -->
		 
		 <h3>空链接</h3>
		 <a href="#">这是空链接</a>
		 
		 <h3>下载链接</h3>
		 <a href="img.zip">下载链接</a>
		 <!-- 地址的链接是 .exe或.zip 等形式的压缩包 -->
		 
		 <h3>网页元素的链接</h3>
		 <a href="http://ww.baidu.com"><img src="img.png" ></a>
		 <!-- 图片、表格、音频、视频等都可以 -->
		 
		 <h3>锚点链接</h3>
		 <a id="maodian">我是溯琳</a>

<!-- 页面间的跳转 这是另一个html-->
		<a href="index.html#maodian" target="_self">index页面中的我是溯琳</a>

取消a标签链接的默认下划线

text-decoration:none;

表格

<table border="1" cellspacing="0" cellpadding="0" width="500px" height="100px">
			<!-- border 表格的边框，
			cellpadding规定单元边沿与其内容之间的空白，默认是1，
			cellspacing规定单元格之间的空白，默认值是2-->
			
			<caption>表格标题</caption>
			<!-- caption 表格的标题 -->
			
			<thead>  <!-- thead表头标签 -->
			<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
			<!-- th表头单元格  文字默认加粗，左右上下居中-->
			</thead>
			
			<tbody><!-- tbody表格身体 -->
			<tr><td>溯琳</td><td colspan="2">男</td></tr>
			<!-- td普通单元格 colspan跨列合并 需要删除多余的单元格-->
			<tr><td rowspan="2">琳玉</td><td>女</td><td>21</td></tr>
			<!-- rowspan跨行合并 需要删除多余的单元格 -->
			<tr>><td>女</td><td>22</td></tr>
			</tbody>
			
		</table>

列表

        <!-- 无序列表 -->
		<ul type="circle">
			<!-- type 改变无序列表前的样式，ul里只可以放li，li里可以放任何东西-->
			<li>爷爷</li>
			<li>爸爸</li>
			<li>儿子</li>
			<li>孙子</li>
		</ul>
		<!-- 有序列表 -->
		<ol>
			<li>爷爷</li>
			<li>爸爸</li>
			<li>儿子</li>
			<li>孙子</li>
		</ol>
		<!-- 自定义列表 -->
		<dl>
			<!-- dt是大哥 dd是小弟 -->
			<dt>溯琳</dt>
			<dd>男</dd>
			<dd>帅哥</dd>
			<dd>特别帅</dd>
		</dl>

去掉li标签前面的点或序号

list-style-type:none;