HTML5 高级第二节

最新推荐文章于 2021-11-20 20:52:20 发布

抹泪的知更鸟

最新推荐文章于 2021-11-20 20:52:20 发布

阅读量201

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： html5 html 前端

本文链接：https://blog.csdn.net/qq_51596354/article/details/121291658

版权

HTML+CSS+JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

HTML5 高级

超链接 a

超链接在网页制作中是一个必不可少的部分，在浏览网页时，单击一张图片或者一段文字就可以弹出一个新的网页，这些功能都是通过超链接实现的。

绝对路径：绝对路径是指文件的完整路径，包括文件传输的协议( http、ftp) 等，一般用于网站的外部链接， 例如：http://news.sina.com.cn/。
相对路径：相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径。同时只要是处于站点文件夹之外，即使不属于同一个文件目录下，相对路径建立的链接也适合。采用相对路径是建立两个文件之间的相互关系，可以不受站点和所处服务器位置的影响。

元素定义超链接，用于从一张页面链接到另一张页面。在所有浏览器中，链接默认外观通常是：未被访问的链接带有下划线而且是蓝色的、已被访问的链接带有下划线而且是紫色的、活动链接带有下划线而且是红色的。

在使用元素时需要注意:

1.如果不使用 href 属性，则不可以使用如下属性：download、 hrefang、media、rel、target 以 及 type 属性。 
2.被链接页面通常显示在当前浏览器窗口中，除非规定了另一个目标( target 属性)。 
3.请使用 Css 来设置链接的样式。

超链接一般有如下可选属性

download        filename        规定被下载的超链接目标
href            URL             规定链接指向的页面的URL
hreflang        language_code   规定被链接文档的语言
media           media_query     规定被链接文档是为何种媒体/设备优化的
rel             text            规定当前文档与被链接文档之间的关系
target          _blank、_parent、_self、_top、framename 规定在何处打开链接文档

_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。  

_self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。 

_parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。  

_top 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

案例：

<body>
<img src="../img/t01d1ef65ab892fcad0.jpg">
<a href="../hello.html" target="_self">覆盖当前页面</a>
<a href="../hello.html" target="_blank">打开新页面</a>
</body>

select 元素

元素用于创建列表框或下拉菜单，该元素必须和元素结合使用，每个元素代表一个列表项或菜单项。
与其他表单控件不同的是，元素本身并不能指定 value 属性，列表框或下拉菜单控件对应的参数值由元素来生成，当用户选中了多个列表项或菜单项后，这些列表项或菜单项的 value 值将作为该元素所对应的请求参数值。
元素可以指定 id、style、class 等核心属性，该元素仅可以指定 onchange 事件属性，当该列表框或下拉列表项内的选中选项发生改变时，触发 onchange 事件。除此之外，元素还可以指定如下几个属性。 disabled：设置禁用该列表框和下拉菜单，该属性的值只能是 disabled 或省略。
muliple：设置该列表框和下拉菜单是否允许多选，该属性的值只能是 multiple，即表示允许多选。一旦设置允许多选，元素就会自动生成列表框。
size：指定该列表框内可同时显示多少个列表项。一旦指定该属性，元素就会自动生成列表框。
在元素里，只能包含如下两种子元素：
1.元素：用于定义列表框选项或菜单项。该元素里只能包含文本内容作为该选项的人文本。该元素除了 id、style、class 等核心属性和 onclick 等事件响应属性外，还有 disabled（禁用）、selected（初始时选择）、value（选项的值）
2. 元素：用于定义列表项或菜单项组。该元素里只能包含元素，所有处于里的元素均属于该组，该组件有一个必填属性 label（标签）。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>select 元素</title>
</head>
<body>
<select multiple>
    <option>吃饭</option>
    <option>睡觉</option>
    <option>打豆豆</option>
</select>
<select disabled>
    <option>A</option>
    <option>B</option>
</select><br>
<select>
    <optgroup label="软件开发">
        <option value="1">开发1部</option>
        <option value="2">开发2部</option>
    </optgroup>
    <optgroup label="设计">
        <option value="3">设计1部</option>
        <option value="4">设计2部</option>
    </optgroup>
</select>
</body>
</html>

textarea 元素

<textarea> 元素用于生成多行文本域，可以指定 id、style、class 等核心属性，同时还可以指定 onclick 等事件响应属性。另外，由于 textarea 的特殊性，它可以接收用户输入内容，也可以选中文本域内的文本，所以还可以指定 onselect、onchange 两个属性，分别用于响应文本域内文本被选中、文本被修改事件。除此之外，该元素也可以指定如下几个属性：

1.cols：指定文本域的宽度，一般为英文字母的个数。
2.rows：指定文本域的高度，一般表示不出现滚动条时的行数。
3.disabled：指定禁用该文本域。
4.readonly：指定该文本域只读。

与单行文本框相同的是，元素也应指定 name 属性，该属性将作为 textarea 对应请求参数的参数名；与单行文本框不同的是，元素不能指定 value 属性，和标签之间的内容将作为对应请求参数的参数值。

案例：

<body>
<textarea cols="80" rows="3" name="remark">
    张三
</textarea>
</body>

表格元素

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

table 一般有如下的自定义参数

align    	left/center/right                不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	        #xxxxxx/colorname                不赞成使用。请使用样式代替。规定表格的背景颜色。
border	        pixels	                         规定表格边框的宽度。
cellpadding		pixels/%                         规定单元边沿与其内容之间的空白。
cellspacing		pixels/%                         规定单元格之间的空白。
width		    pixels/%                         规定表格的宽度。

案例：

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用

显示边框。

表头：表格的表头使用标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

注意：在 td 上使用 colspan 规定单元格可横跨的列数，rowspan 设置单元格可横跨的行数。

章节练习：（默写 30 分钟）

1.按照设计图完成下面表格排版。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-34JLhjEu-1636707398323)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20211108203803882.png)]$

2.按照如下设计图完成表格排版。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vdqMpPHP-1636707398342)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20211108203824388.png)]$

第一题参考代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="1" width="800" height="300" cellspacing="0" align="center">
    <caption>
        <h1>书籍排行榜</h1>
    </caption>
    <tr bgcolor="gray">
        <th>排名</th>
        <th>关键词</th>
        <th>点击量</th>
        <th>欢迎指数</th>
        <th>最近七日</th>
        <th>照片</th>
        <th>相关链接</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>三国演义</td>
        <td>12345427</td>
        <td>☆★★★★</td>
        <td>2321</td>
        <td><img src="https://ps.ssl.qhimg.com/sdmt/113_132_100/t0164f5c8bd69b884c6.webp"></td>
        <td>
            <a href="##">贴吧</a>
            <a href="##">图片</a>
            <a href="##">百科</a>
        </td>
    </tr>
    <tr align="center">
        <td>2</td>
        <td>水浒传</td>
        <td>12345426</td>
        <td>☆☆★★★</td>
        <td>2321</td>
        <td><img src="https://ps.ssl.qhimg.com/sdmt/115_132_100/t0125b521baa1ba0d16.png"></td>
        <td>
            <a href="##">贴吧</a>
            <a href="##">图片</a>
            <a href="##">百科</a>
        </td>
    </tr>
</table>
</body>
</html>

第二题参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="1" width="800" height="300" cellspacing="0" align="center">

    <tr align="center">
        <td colspan="2">品牌</td>
        <td colspan="3">春装</td>
        <td colspan="3">夏装</td>
    </tr>
    <tr align="center">
        <td colspan="2"></td>
        <td>男装</td>
        <td>女装</td>
        <td>童装</td>
        <td>男装</td>
        <td>女装</td>
        <td>童装</td>
    </tr>
    <tr align="center">
        <td rowspan="2">    </td>
        <td>牛仔系列</td>
        <td>116</td>
        <td>98</td>
        <td>68</td>
        <td>88</td>
        <td>86</td>
        <td>46</td>
    </tr>
    <tr align="center">
        <td>牛仔系列</td>
        <td>116</td>
        <td>98</td>
        <td>68</td>
        <td>88</td>
        <td>86</td>
        <td>46</td>
    </tr>
</table>
</body>
</html>

抹泪的知更鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5 高级第二节

HTML5 高级超链接 a超链接在网页制作中是一个必不可少的部分，在浏览网页时，单击一张图片或者一段文字就可以弹出一个新的网页，这些功能都是通过超链接实现的。绝对路径：绝对路径是指文件的完整路径，包括文件传输的协议( http、ftp) 等，一般用于网站的外部链接，例如：http://news.sina.com.cn/。相对路径：相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径。同时只要是处于站点文件夹之外，即使不属于同一个文件目录下，相对路径建立的链接也适合。采用相对路径是
复制链接

扫一扫