2018/07/25 wen html课堂知识笔记

知识回顾(2018/07/24课堂知识)

1、在<head> 标签内一般指定的内容

<meta charset ="utf-8"> 指定字符集
<title ></title >  页面标题

2、文本元素

内容标题  <h1>-<h6>
段落   <p>
水平分割线<hr>
换行<br>

3、列表元素

有序列表:
<ol> <li> < 属性 Type =i a A i I  start reversed>

无序列表
<ul> <li>

定义列表

列表嵌套

4、分区元素

<div>
<span>

5、元素分类

块级元素   div 好-6 p hr 
行内元素:  span  i /em  b/strong s /del 

6、特殊字符
空格 &nbsp
大于号/小于号  &gt &lt
换行  <br>

7、图片元素 img标签

支持格式 jpg png gif 
属性包括
src 文件路径  相对路径和绝对路径
alt 文件不能正常显示时显示此文本
title 鼠标悬停的时候显示的文本
width 设置具体数值像素值或者是百分比,如果单独设置宽度数值,图片会自动按照比例进行缩放,固定宽高比需设定宽度和高度两个值
 

  

day 07/25 

1、为文件指定map的操作(map称为图像地图) <img src="../imgs/g1.jpg" usemap="#mymap"> 为了保证浏览器的兼容性问题,把name和id都写上 <map name="mymap" id="mymap" > <area shape="rect" coords="0,0,200,200" href="../img/g2.jpg"> shape 指定有效区域的形状 "rect"为矩形circle为原型区域 以坐标对角线包含区域为指定有效区域 </map>


<img src="../ims/g2.jpg" usemap="#yourmap">
<map name="yourmap" id="yourmap">
<area shape="circle" coords="a,b,c" href="">
</map>

map的id 和name属性是指定图片使用的是哪一个map
在map对标签中,area中指定图片map的形状,可以是原型circle 可以是矩形rect ,coords指定坐标值,其中在rect矩形中
坐标值为四个数,即为两个坐标值,两个坐标值的对角线连线指定有效区域,在circle原型的时候,坐标值为图片左边缘到圆心,图片上边缘到圆心,原的半径
href属性不知可以跳转到图片还可以跳转到以绝对路径表示的超链接,还可以是一个文件,如果该文件无法用浏览器直接打开的时候,则会采取下载操作

2、连接到某个页面的操作(超链接) <a>标签

<a href="http://www.tmooc.cn"> TMOOC </a>
<a href=../imgs/g1.jpg target="_blank"> 美女图片 </a> target 的属性值指定在哪一个窗口或者是页面中打开这个文件

<a href="xxx.zip"> 文件下载</a>
与html同级的文件或者是目录可以直接进行访问 xxx.zip zzz.jpg
html上级的文件或者是目录 <a href="../g1.jpg">

在页面中使用超链接添加锚点 <a href=""></a> 点击想回到页面的哪一个部分,就在何处定义锚点

定义锚点 <a id="top" name ="top"></a> 锚点的用法,创建锚点 <a id="top" name="top" ></a>
在定义跳转的超链接位置添加跳转链接 <a href="top">

1、自定义跳转到页面的某一个位置

2、在页面指定位置添加超链接

<a href="#a"> </a>
         <a href="#b"> </a>
         <a href="#c"> </a> 

3、在要跳转的位置处定义图片以及跳转名
<a id="a" name="a"> </a>

<img src="../img/g1.jpg">
<a id="a" name="b"> </a>
<img src="../img/g2.jpg"> 
<a id="a" name="c"> </a>
<img src="../img/g3.jpg"> 

外链图片将图片放到跳转位置的<a>标签内,在<a>标签中添加图片,将图片放置到<a>标签内部

3、演示在Html中添加表格的功能

<body>
<table boder="1px" cellspacing ="0px" cellpadding="0px" width="" align="center">
其中cellspacing 指定的是表格边框和单元格边框的距离、单元格边框和单元格边框的距离
cellpadding指定的是内容距离单元格边框的距离
width指定的是表格的整体宽度
align指定的是表格的对齐方式

<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>

<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
</body>

表格的创建中<tr>标签指定的是行数,有几个<tr>对标签,就有几行,<td>对标签指定的是列数,在一个<tr>对标签中有几个
<td>对标签就是说该表格有几列

跨行合并: 在<td>中指定rowspan属性值为要合并的行数,注意将已经合并的行单元格删除
跨列合并 在<td>标签中指定colspan标签为要合并的猎术,注意将已经合并的列单元格删除



  

猜你喜欢

转载自www.cnblogs.com/oskw-1992/p/9364434.html