HTML学习：标签

HTML5新特性，相比HTML新增加的东西：

1.用于绘画的canvas标签

2.用于媒介回放的video和audio元素

3.对本地离线存储的更好支持

4.新增的特殊内容元素：article，footer，header，nav，section

5.新增的表单控制：calendar，date，time，email，url，search

<!DOCTYPE html> ：声明文档类型为html

meta标签：

<meta http-equiv="Content-Type" content="text/html;charset='utf-8'" />
<meta name="keyword" content="abc" />
<meta charset="UTF-8" />

keyword：搜索的关键字

content：内容描述

charset：网页字符编码

1.常规标签：标签，也叫标记，也叫元素。

<标签 属性="属性值" 属性="属性值"></标记>

2.空标签

<标签 属性="属性值" 属性="属性值" />

空标签，没有结束标签，用"/"代替。

html中的注释：

：换行标签

        abc
        def<br />hijk

<hr />：水平线标签

字体样式标签：

，：加粗

，：倾斜

特殊符号：

空格： 

大于：>

引号："

版权符号： ©

常见图像格式：

jpg：网页上广泛使用，采用的是有损压缩，会造成图像失真，压缩后体积小，具比较清晰
gif：网页上最广泛使用，不仅支持透明色还支持动画。
png：兼有jpg和gif的优势，同时具体gif不具备的特性。是一种新兴的图像格式，在部分旧版浏览器中不支持。
bmp：不支持文件压缩，windows上常见，web网页很少使用。

图像标签：<img />

<img src="images/abc.jpg" alt="....", title="...." width="160" height="320">

src：图像文件的位置

alt：图像的替代文字

title：鼠标悬停时的提示文字

width：图像宽度

height：图像高度

文件路径，可以使用相对路径和绝对路径。

相对路径，示例：test.html中想引入test.css文件，如果它们在同一个目录下，相对路径表示为：href="test.css"；如果不在同一文件加下，则可以通过../向外跳出。

绝对路径，示例："htpp://xxxx/jqurey/1.11.3/jquery.min.js

<a></a>：链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>

href：链接路径

target：链接在哪个窗口打开，常用值_self，_blank。_blank在新标签窗口打开链接，_self在当前标签窗口打开链接。

<a href="index.html" target="_blank">首页</a>
<a href="timg.html" target="_blank"><img src="img/tmig.jpg" alt="汤唯" width="300" height="300" /></a>

常用的链接

页面间链接：从一个页面跳到另一个页面
锚链接：从A页的甲位置，跳到A页面的乙位置或B页面的乙位置。在目标标签中设置id属性值，链接处href="[路径] #属性值"。设置<a name="值">目标处</a>，在链接处href="[路径]#值"
功能链接，如email，qq：<a href="mailto:xxx@163.com">联系我们</a>

锚链接示例：

从A页的甲位置，跳到A页面的乙位置：

链接：

<a href="#mao1"></a>

锚点：

<a name="mao1"></a>

列表：分为有序列表，无序列表，自定义列表

有序列表和无序列表，是指列表前面是否有数字之类的排序符号，不是说列表之间的li是否有序。列表之间的li都是有序的。

无序列表：<ul></ul>，其中的项目用<li></li>表示

<ul type="square">
    <li>
        abc
    </li>
    <li>
        def
    </li>
    <li>
        234
    </li>
</ul>

无序列表常用的属性，type。

type取值：circle空心圆点，dics实心圆(默认值)，square实心方块

有序列表：<ol></ol>，其中的项目用<li></li>表示

有序列表常用的属性，type。

type取值：1使用数字作为项目符号(默认值)，A/a使用大写/小写字母作为项目符号，I/i使用大写/小写罗马数字作为项目符号。

自定义列表：<dl></dl>，其中的项目名称用<dt></dt>表示，项目名称对应的项目列表用<dd></dd>表示

<dl>
    <dt>
        所属学院
        <dd>
            计算机学院
        </dd>
    </dt>
    <dt>
        所属专业
        <dd>
            计算机技术
        </dd>
    </dt>    
</dl>

表格：<table>/table>，用<tr><.tr>表示行，用<td></td>表示列，用<th></th>表示表头

表格：简单通用，结构稳定。

基本结构：单元格，行，列

表格左对齐方式，表格的align属性：左对齐(默认)、右对齐、居中对齐

表格垂直对应方式，表格的valig属性，较少使用：顶端对应、居中对齐、底端对齐、基线对齐

表格的跨列，列td的colspan属性：属性值n，跨几列

表格的跨行，列td的rowspan属性：属性值n，跨几行

表格的外边框，表格的border属性：数字

表格的行边距，表格的cellspacing属性：数字

表格的列边距...

表格中的字，与上下边框的距离，cellpadding属性：数字

<table align="center" border="5" cellspacing="0" cellpadding="5">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td colspan="2">第一行第一列</td>
<!--         <td>第一行第二列</td> -->
        <td>第一行第三列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td rowspan="2">第二行第三列</td>
    </tr>
    <tr>
        <td>第3行第一列</td>
        <td>第3行第二列</td>
        <!-- <td>第3行第三列</td> -->
    </tr>
</table>

posted on 2018-11-10 19:15 myworldworld 阅读(114) 评论(0) 收藏举报

刷新页面返回顶部

myworldworld

HTML学习：标签

导航

公告