Day2：文本标记

一、meta

1、<meta name="author" content="licy"><!--描述作者是谁-->

2、<meta name="keywords" content="java,html,php"><!--描述网页的关键字-->爬虫机器人针对它查找

3、<meta name="description" content="自学网站"><!--描述网页是干什么用的-->

4、<meta name="generator" content="editplus"><!--描述网页是用什么写的-->

5、<meta charset="utf-8"/>   <!--网站内容的编码-->

二、html文本标记

1、html转义字符：基本格式&xxx;

（1）<   &lt;

（2）>  &gt;

（3）空格   &nbsp;   英文空格

（4）&   &amp;

（5）©   &copy;

（6）TM   &trade;

（7）®   &reg;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>转义字符</title>
    </head>
    <body>
        只需要在页面中输入一个&ltbr/&gt就可以换行,加空格&nbsp;&nbsp;哈哈，你只需要在源码中加入&amp;nbsp;就可以产生空格了
        <hr/>
        &copy;版权所有&trade;
    </body>
</html>
View Code

2、html注释：不需要浏览器处理的代码可用注释

<!--注释内容-->

注：注释不能嵌套

3、

标签名　　 含义 常用属性 类型
<b></b> blod文本加粗，描述样式 xhtml已经废弃 inline
<strong></strong> 文本加粗，描述语义 xhtml推荐代替<b> inline
<i></i> italic文本斜体显示 xhtml已经废弃 inline
<em></em> 文本斜体显示，描述语义 xhtml推荐代替<i> inline
<u></u> underline,下划线，描述样式 xhtml已经废弃 inline
<s></s> strike,删除线，描述样式 xhtml已经废弃 inline
<sub></sub> 下标，描述样式 xhtml已经废弃 inline
<sub></sub> 上标，描述样式 xhtml已经废弃 inline
h1,h2...h6 header,标题字,描述语义 在不同的浏览器中，默认字的高度、间距都是不一样的 block
<p></p> paragraph文章的段落，描述语义   block
<br/>      
<div></div> 元素分组工具,层，常用于页面布局,最简单的block元素 必须配合css或者js才有效果 block
<span></span> 行内分区工具，是最简单的一个inline元素 必须配合css（DIV+CSS） inline
<hr/> 水平分隔线 属性有width、color、align block
<pre></pre> 使用源代码中的效果呈现内容   block
<img/> 通知浏览器此刻应该向服务器发起一个图片请求

src只能图片的url

width

height：像素、百分比

alt：若图片无法显示，就用此内容代替

title

 inline
<a></a> anchor  锚

href指定要跳转的url、邮箱、js函数，target指定你在哪个页面中打开（self/_blank）

name指定可供停靠的锚点名称

 inline
table     block
tr      
td  

align:left/center/right

valign:top/middle/bottom

rowspan:跨越的行数

clospan：跨越的列数

  

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>文本标记</title>
    </head>
    <body>
        点击<b>此处</b>返回<strong>首页</strong>
        <hr/>
        根据<i>作者</i>描述
        <hr/>
        点击<u>此处</u>返回生成首页列表
        <hr/>
        x<sub>1</sub>*x<sup>2</sub>
        <hr/>
        <h1>一级标题</h1>
        <h2>一级标题</h2>
        <h3>一级标题</h3>
        <h4>一级标题</h4>
        <h5>一级标题</h5>
        <h6>一级标题</h6>
        <p>文章的第一段话文章的第一段话文章的第一段话文章的第一段话文章的第一段话文章的第一段话文章的第一段话文章的第一段话文章的第一段话文章的第一段话文章的第一段话</p>
        <p>文章的第二段话文章的第二段话文章的第二段话文章的第二段话文章的第二段话文章的第二段话文章的第二段话文章的第二段话文章的第二段话文章的第二段话</p>
        
        页面在<span style="color:red">3</span>秒钟后将自动跳转
        <pre>
我是中国     我自豪哈哈哈      
   就开始江东父老见识到了
        <pre>
    </body>
</html>
View Code
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>文本标记</title>
    </head>
    <body>
        a<img src="aa.png"/>b
    </body>
</html>
View Code

 

注：xhtml严格区分大小写，必须小写，html中不区分，为了统一，所以都写小写

单标记标签的斜杠，在html中可以省略，但是在xhtml中不可以，html5允许省略，所以都写上就得了

4、html元素类型：

（1）区块元素（block）：必须独立占一行

（2）内联元素（inline）：可以与其他内容处在一行中

5、web开发用到的图片格式

bmp：未经压缩的bit图，一般不用于web开发

jepg：经过压缩的图片，保真度高，色彩丰富，适用于web中的照片，1024*768像素的图片压缩到100k甚至更小都可以接受

png：色彩没有jpg丰富，但透明度支持好，压缩比例大，适用于图标

gif：色彩比较丰富，支持动画效果，也在一定程度上支持透明度

psd：ps原始文档

tiff：出版印刷

raw：太大

6、页面中使用的资源路径：

html中页面中可能用到资源：图片、css、js、另一个页面

要使用这些资源，必须指定资源url、url有一下三种：

（1）绝对路径：以协议名开头的路径，如：http://www.baidu.com/logo.png

（2）相对路径：不以协议名开头，如：g.jpg、./g.jpg、images/g.jpg、../g.jpg

（3）根相对路径：以/开头的路径，相对于当前站点的根路径，与当前页面所在路径无关

补充：<head><base href="http://www.baidu.com/"/></head>

base标签用来指定当前页面的相对地址的资源的url的基准值

7、表格-重点

（1）显示批量的数据

（2）作页面布局-过时

posted @ 2017-07-16 14:11  licy_python  阅读(182)  评论(0)  编辑  收藏  举报