HTML基础

1.浏览器：解释和执行HTML源码的工具

五大浏览器：IE(IE6及以下版本（IE7及以上）、FF（FireFox）、Chrome、Opera、Safari(Apple)
Trident引擎，（就是IE的WebBrowser控件）
WebKit引擎（开源浏览器内核），现在很多非IE核心的浏览器用的是WebKit引擎，比如遨游3或搜狗的双核、Chrome、Safari.
Gecko引擎，应用于Firefox
Presto引擎，应用于Opera
各浏览器源码（C++）：http://www.webkit.org

2.HTML（超文本标记语言）：HyperText Markup Language

浏览器兼容性问题：描述文件是一个统一的，但是就像口语翻译一样，不同的翻译翻译出来的东西是不一样的，不同的浏览器品牌对HTML的支持是有差异的，所以同一个网页在IE上和FireFox上看起来可能长得不一样，最明显的就是QQ空间上的页面在FireFox上显示就有问题，甚至有的页面在IE6、IE7、IE8上长得也不一样，因此Web开发过程中的一个重要的也是最头疼的问题就是浏览器的兼容。测试FireFox（简称FF）、Chrome等浏览器安装各自的软件就可以，测试不同版本的IE可以用IETester、IE Collection（使用IE Collection浏览页面时，最好通过http://方式浏览，否则部分版本浏览会报错。）
CSS、JavaScript都存在浏览器兼容问题，CSS尤甚，我们只考虑JS的兼容。

3.静态页面、动态页面

静态页面：后缀名*.html，*htm。有一个html页面文件保存在服务器上，浏览器要这个页面的时候服务器就把这个页面文件发给浏览器
动态页面：动态页面中会包括一些脚本代码。服务器上没有浏览者要看的页面，而是服务器生成的HTML页面发给浏览器，动态语言的服务器可以用C#、VB.Net、PHP、Java、C等编写。

　　　　htm、html是静态页面，asp、aspx、jsp、php等都是动态页面。

静态网页：用户请求网页的时候，服务器直接将该网页文件从磁盘中读取并返回给客户端浏览器。
动态网页：用户请求该网页的时候，服务器会先执行该网页中的C#代码，然后将执行后生成的html代码再返回给浏览器。

4.开发工具

　　高级记事本：Editplus、Notepad++、UltraEdit

5.网页的基本结构

1 <html>
2     <head>
3         <title>我的第一个网页</title>
4     </head>
5     <body bgcolor="red background="bg.jpg>
6         Hello World
7     </body>
8 </html>

总结：(xhtml)

1.编写html代码的时候所有的标签都小写

2.标签有开始，必须有结束标签。除非该标签是自关闭标签<br/>。

3.所有的标签，如果有属性，那么属性的值一定要使用双引号引起。

6.颜色系

计算机中的颜色：红、绿、蓝三种颜色组成
bgcolor的取值可以是英文单词，也可以使十六进制的颜色
取色工具：ColorPic、PicPick、VS自带的颜色选择对话框、FastStone Capture.
bgcolor="rgb(10,125,200)"或bgcolor="rgb(10%,125%,20%)"也可以，但存在浏览器兼容性问题FF、Opera、Chrome不支持

7.DocType介绍

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

作用：告诉浏览器使用同一个hml版本解析，最大程度保证不同浏览器显示的界面是一样的
hml版本：html1.0、html2.0、html3.0、html4.0、xhtml1.0、xhtml1.1、html5

8.常用的html标签

A. html与xml的相同点：

是标记语言，注释都是：
都是通过dom编程方式来访问
都可以通过CSS来改变外观

B. html与xml的区别：

xml语法要求更严格

又开始标签必须有结束标签、大小写一致、属性值用双引号等

xml侧重于数据存储，html侧重于数据展示。趋势，数据存储与数据表现相分离

html中只有要显示的页面内容，样式都有CSS来控制，html页面中不再有<font>等标签，控制样式都用CSS。

xhtml:可扩展超文本置标语言（eXtensible HyperText Markup Language,XHML）

更符合xml语法规范的html。xhtml的出现主要是为了向xml过度，通过xml+css也能实现很好的页面。【xhtml要求：全部小写、又开始结束标签、属性用双引号】

dhtml:Dynamic HTML的简称，就是动态的html。HTML、样式表和JavaScript的组合（后续常用）

9.html常用标签：文字格式

h标签（标题），HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。h1最大，h6最小。
<br/>只是回车，<p>是分段。<p>前后会有比较大的空白，而<br/>则没有。
<center>居中显示</center>
<b>粗体</b>,推荐<strong>。<i>斜体</i>。<u>带下划线</u>。<em>强调，斜体</em>
<sub>2</sub>下标，如：H<sub>2</sub>O
<sup>2</sup>上标，如：10<sup>2</sup>
<font></font>字体标签，<font color="red" size="7" face="隶书">红色</font>。color（设置颜色）size(1-7) face(设置字体、设置字体时注意用户计算机中必须有改字体才能正常显示）
<hr> color size(厚度) width(长度) align=left/center/right（默认为居中显示）
<pre>预格式化保持本色

注意：

1.在编写html页面选用标签时，要根据语义来选用标签。比如，本来应该是一个列表项就用ul或ol，而不要用<br/>;本来需要<h1>标签的地方不能为了让字体变小点而是用<h3>,而应该是用css来控制大小。

2.尽量避免使用<font>、<b>、<i>等只用来修改展示样式的标签，使用更具有语义的标签CSS样式

【Important】选标签按照语义来选，不要按照样式来选

10.URL、超链接uri

URL:URL表示资源在网络中的地址，URI的概念，比URL大，有的类中使用URI这种说法，可暂时看成和URL一样就行。
超链接：<a href="http://www.baidu.com">百度网</a>
target属性的一些取值：

_blank:在新窗口中打开

_self:在自己的窗口中打开

_parent:父窗口中打开

_top:表示在顶级窗口中打开

　　4. 框架名称：在指定框架中打开

5. 自己给窗口起个名字：mywin,则此后是target=mywin的都在该窗口打开

6. a标签的一些常用属性：href、tiltle、target、name（锚记时用）

<a>中还可以嵌套图片，这样就是点击图片打开链接

11.图片

<img width="200" height="200" src="1.jpg" alt="说明文字"/>

alt属性：图片无法显示时显示文本，鼠标方式会有悬浮提示“点击查看大图”

src属性：指向文件的路径，图片是链接的，不是插入的，如果src指向的文件不存在，则显示不出来

border属性：指定边框，border=“0”不显示边框

width,height属性：只改变图片显示的大小，并没有从根本上改变图片的大小，下载的时候仍是下载大图片，为了节省流量，这里的图片可使用缩略图。

注意：

img一般情况下都要设置alt值，除非该图片仅仅用来装饰，没有实际意义，则可将alt=""设置为空，但不能不设置alt。
浏览器每次遇到img则向服务器发送一次请求，除非img的src路径一样则用缓存。

补充：

px（Pixel）单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的（随着屏幕分辨率而变化），国内推荐；QQ截图也是使用px作为长度宽度单位
em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多；如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。行间距、宽度等。

12.乱码问题

在<head>中进行设定

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>:指定网页编码
<meta http-equiv="Refresh" content="3;url=http://www.baidu.com"/>三秒钟后重定向到新网页（发帖成功后提示“发帖成功，即将转向帖子查看页面”）。
<meta http-equiv="Cache-Control" content="no-cache"/>禁止浏览缓存页面。

13.列表

<dl>：定义列表，一般用于名词解释之类。类似于“字典”

<ul>：无序列表

<ul>
    <li>春天</li>
    <li>夏天</li>
     <li>秋天</li>
     <li>冬天</li>
</ul>

<ol>：有序列表

<ol>
    <li>It's time to get up.</li>
    <li>Can I sleep more?</li>
    <li>Did you sleep well?</li>
    <li>I slept like a baby last night.</li>
</ol>

补充：

<ol>，<ul>都有一个type属性，用来设置序列的显示样式。type的取值可以是：A、a、1、i、I、disc、circle、square。（可用CSS控制ul、ol的type样式）

14.表格<table>

<table>
    <tr>
        <td colspan="合并列数" rowspan="合并行数">列1</td>
    </tr>
</table

水平对齐方式：align:left,center,right

垂直对齐方式：valign:top,middle,bottom

练习

<html>
    <head>
        <title>Excise</title>
    </head>
    <body>
        <ol type="a">
            <li>爱</li>
            <li>青苹果乐园</li>
            <li>红蜻蜓</li>
            <li>芙蓉姐夫</li>
            <li>水煮鱼</li>
        </ol>
        <ul>
            <li>爱</li>
            <li>青苹果乐园</li>
            <li>红蜻蜓</li>
            <li>芙蓉姐夫</li>
            <li>水煮鱼</li>
        </ul>
    </body>
</html>

<table border="1">
            <tr>
                <td width=100 align="center" ><strong>姓名</strong></td>
                <td width=100 align="center"><strong>性别</strong></td>
                <td width=100 align="center"><strong>工资</strong></td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>10000</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>10000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>10001</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>10002</td>
            </tr>
        </table>

<table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td colspan="3" align="center"><strong>学生成绩表</strong><td>
            </tr>
            <tr>
                <td width="80">英语</td>
                <td width="80">数学</td>
                <td width="80">语文</td>
            </tr>
            <tr>
                <td>95</td>
                <td>98</td>
                <td>89</td>
            </tr>
        </table>

<table border="1">
                <tr>
                    <td colspan="3" align="center"><strong>学生基本情况</strong></td>
                </tr>
                <tr>
                    <td width="100" align="center"><strong>姓名</strong></td>
                    <td width="100" align="center"><strong>性别</strong></td>
                    <td width="100" align="center"><strong>专业</strong></td>
                </tr>
                <tr>
                    <td>刘备</td>
                    <td>男</td>
                    <td rowspan="3">计算机</td>
                </tr>
                <tr>
                    <td>刘尚香</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>诸葛亮</td>
                    <td>男</td>
                </tr>
</table>

posted @ 2018-12-07 13:42 Shirly92 阅读(133) 评论(0) 收藏举报

刷新页面返回顶部

Shirly92