HTML基础2

<h4> 1.文本样式</h4>

&lt;b&gt;,&lt;strong&gt;---加粗
&lt;i&gt;,&lt;em&gt;---斜体
&lt;s&gt;,&lt;del&gt;---删除线
&lt;u&gt;---下划线
&lt;sup&gt;---上标
&lt;sub&gt;---下标
(以上都是双标签)
推荐使用有语义的标签,优先搜索.

<h4>2.分区元素</h4>
(1)块级分区
&lt;  div &gt;<br>
用于页面布局.特点:独占一行<br>.

(2)行分区
&lt;span&gt;
同一行文字使用不同的样式时使用span

3.块级元素和行内元素
①块级元素
网页中独占一行的元素,基本都是块级元素.
ex:p h1-h6 hr pre div

②行内元素
与其他行内元素或者行内块元素公用一行,一行放不下再换行,默认从左往右排列.

③行内块元素
input
与其他行内元素或者行内块公用一行,一行放不下再换行
行内块元素自带宽高

④table元素
非常特殊的显示方式

<h2 align='center'>图片和链接</h2>

1.图片
&lt;  img &gt;<br>

2 图片路径
(1)绝对路径
①网络资源的绝对路径:通讯协议://主机名/文件目录结构/文件名称.
不占本地存储空间,但是不稳定
图床网站
②本机资源
项目禁用
(2)相对路径
参照的是访问的html文件

3 img标签的属性
 src:图片资源路径
 alt:图片资源加载失败时显示的文本
 width/height:设置图片宽高

4 链接(a)
(1)属性:
①href:a标签不写href相当于普通文本
②target:指定打开链接的方式
target="_self"---在当前标签页打开新网页
target="_blank"---在新标签页打开新网页
(2)a标签其他表现形式
①下载资源:&lt;  a href="*.zip"&gt;&lt; /a &gt;
只能下载zip(基本不用)
②链接到电子邮件:&lt;a href="mailto:邮箱"&gt;打开邮箱&lt;  /a &gt;
③返回页面顶部&lt; a href=""&gt;&lt; /a &gt;
④使用a标签执行js:&lt; a href="javascript: show()"&gt;&lt; /a &gt;;href里面可以写方法或者语句

5 锚点
锚点:在页面上做一个标记,可以通过点击a标签跳转到这个记号
锚点的使用:
① 定义锚点:
i &lt; a name="锚点名称"&gt;&lt; /a &gt;---(h4的写法)
ii &lt;任意标签 id="锚点名称"&gt;    ---推荐使用
②使用a标签跳转到锚点---&lt; a href="锚点名称"&gt;&lt; /a &gt;

6 表格
table>tr>td
**tr:** table row
**td:** table data
早期的表格用来做布局,目前已被完全淘汰.
(1) 表格是一种特殊的显示方式,会把表格中所有的数据一次性读取进内存,一次性渲染,渲染效率低下,现在项目中不再使用表格布局.
(2) 表格的内容多,而尺寸小,最终大小由内容决定;内容小而尺寸大,最终尺寸由尺寸决定.(谁大听谁的)
(3) 内容(英文,数字)如果不加空格,会认为是一个单词,不会换行,但是每个汉字都会换行
(4)table在html解析时,如果没写tbody,浏览器会自动添加一个tbody,把所有内容添加到tbody中

**(1) 属性**
① table的属性
border="1px"--- 表格的边框(只会让里面的边框显示,但不会影响其粗细)
width/height="450"---表格整体的宽度和高度
align="center/left/right"---表格相对于网页的对齐方式(与tr.td不同)
bgcolor="ddd" ---整个表格的背景色
bordercolor="red"---表格所有的边框的颜色
cellpadding="13"---单元格的内边距(内容到边框的距离)
cellspacing="24"---单元格的内边距(边框到边框的距离)

②tr的属性
align="center/left/right"---设置该行表格的水平对齐方式
valign="top/middle/bottom"---设置该行的垂直对齐方式
bgcolor="yellow"---设置该行的背景色

③td的属性
width/heoight="60"---设置单元格宽高,会影响其他的行和列
align/valign=""---同tr
bgcolor="green"---该单元格的背景色
colspan="2"---跨2列
rowspan="3"---跨三行

**(2)跨行与跨列**
跨行---colspan
向右合并n个单元格(n包含自己)
需要删除被合并的单元格
跨列---rowspan

**(3) 表格中的可选标记**
①表格标题
&lt; caption&gt; &lt; /caption&gt;
要紧跟table标签
②行/列的标题
&lt; th&gt;&lt; /th&gt;

**(4)表格复杂应用**
①行分组(表结构)
&lt;thead&gt;&lt;/thead&gt;
&lt;tbody&gt;&lt;/tbody&gt;
&lt;tfoot&gt;&lt;/tfoot&gt;
②表格的嵌套
表格可以嵌套,但是被嵌套的表格必须放在td中

7 列表(*****)
常用于页面布局
(1) 列表种类
**① 有序列表---ol**(order list)
ol>li
属性:
(a) type:列表标识的类型:
取值:1 默认;a/A  标识项为字母;i/I标识项为罗马字母
(b) start :列表项的开始值

**②无序列表---ul**(unorder list)
ul>li
属性:
type:disc/circle/square/**none**
(2)列表嵌套
①所有嵌套内容必须写在li中
②列表嵌套列表
ul>li>ul>li*2
**③定义列表**
用于给出一类事物或对一个名词的解释
< dl >
    < dt >名词< / dt>
    < dd>对名词的解释< /dd >
< /dl >