web 学习笔记1-HTML

来源：互联网发布：lol英雄详细数据编辑：程序博客网时间：2024/04/27 06:07

1、HTML的概述：

hypertext markup language 超文本标记语言。超文本：音频，视频，图片称为超文本。标记 ：<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。备注：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).HTML页面直接由浏览器解析执行。

2、HTML的一些网络术语：

a、xhtml：符合XML语法标准的HTML。b、dhtml：dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml。c、http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。   SMTP 邮件传输协议。   ftp:文件传输协议。备注：编辑html可以使用notepad++ editplus dreamweaver等。

3、html的结构描述：

HTML是一个弱势语言，不区分大小写，页面的后缀名是html或者htm。主要有3个部分组成a、声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。b、head部分： 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。c、body部分：我们缩写的代码必须放在此标签內。例如：<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="Generator" content="EditPlus?">    <meta name="Author" content="">    <meta name="Keywords" content="">    <meta name="Description" content="">    <title>排版标签</title></head><body>    你好</body></html>

4、html的各种标签-排版标签：

有的标签是成对的有的是单个的。所有的浏览器默认情况下都会忽略空格和空行。<p>：p代表一个段落。    属性： align:对齐方式. 取值：left,right,center    例如：<p align = "center">你好</p><br>：代表是换行。<hr>：平分隔线 horizontal rule 。    里面有一些属性可以设置        color: 线的颜色        size : 线的粗细        width: 线的长短        align: 对齐方式 取值： left,right,center    例如：<hr width = "50%" size = "10" color = "red" noshade>//占屏幕的50%的横线，10个像素宽，红色，没有阴影<center>：内容居中。    center标签里面的所有元素都是居中的，例如：    <center>        <p align = "left">刘德华</p>        <p>刘德华</p>    </center>    注意：center里面的标签属性优先级更大，第一个p标签就是靠左的。<pre>：预定义格式标签。告诉浏览器不要忽略空格和空行。    例如：正常在p标签里面是显示在一行的，但是在<pre>里面就是2行    <pre>        你好        中国    </pre><div>：块级标签  必须单独占据一行。把标签中的内容作为一个块来对待。    例如：    <div align = "left">        林志玲        <p>刘德华</p>    </div>    这个会显示2行<span>： 块级标签 不换行字体标记。    例如：    <span>你好</span>    <span>你好</span>    这个是一行显示，两个之间有个空格。

5、html的各种标签-字体标签：

<h1>...<h6>：定义字体大小,h1最大，html中只定义了这6个大小，如果还要更大只能用css来设置了。    例如：    <h1 align = "center">刘德华</h1>    <h2>刘德华</h2>    <h3>刘德华</h3>    <h4>刘德华</h4>    <h5>刘德华</h5>    <h6>刘德华</h6><font>：    font里面可以设置一些属性    color：颜色    size：大小    face：字体类型    例如：    <font face = "华文彩云" size = "7" color = "red">刘德华</font>    备注：color可以有3中写法        a、英文单词: red         b、十六进制：#00ffcc        c、RGB(三原色) : new RGB(124,156,23)<b>：加粗<strong>：加粗<i>：斜体<em>: 斜体<u>: 下划线<s>: 中划线(删除线)<sup>: 上标<sub>: 下标.特殊字符：    &lt;小于     &gt;大于     &amp; &符号     &quot;双引号    &apos;单引号    &copy; 版权     &trade;商标     &nbsp;空格    扩展：&#32464;

6、html的各种标签-图像标签：

<img>：代表是一副图片。    里面有一些属性需要设置    src : 图片的路径        a、相对路径 路径是相对页面所在的路径 两个标记.和.. ,分表代表当前目录和父路径        b、绝对路径            1) : 以盘符开始的路径                eg: C:\Documents and Settings\Administrator\桌面/images/1.jpg            2) : 网络路径                eg: http://www.baidu.com/images    width: 宽度    height：高度    Alt：当图片显示不出来的时候代替图片显示的内容    title： 提示性文本    border: 边框    例如：    <img src = "images/1.jpg" width = "300" height = "300" alt = "美女" border = "10" title = "这是一个美女">注意：title属性很多标签都有，鼠标放上面会提示你设置的内容。热点：就是特定的位置添加超链。例如：    <img src="images/1.jpg" width="300" height="300" usemap="#Map" border="0" />    <map name="Map" id="Map">        <area shape="circle" coords="122,81,38" href="demo_字体标签.html" />    </map>

7、html的各种标签-清单标签：

3种：a.无序列表ul    属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆)    例如：    <ul type = "circle">        <li>中国</li>        <li type = "square">美国</li>        <li>日本</li>    </ul>b.有序列表(OL)    属性: type:取值：1(阿拉伯数字，默认),a,A,i,I          start: 从几开始    例如：    <ol type = "a" start = "10">        <li>中国</li>        <li>美国</li>        <li>日本</li>    </ol>    从10开始c.定义列表(dl)     dt: 列表项的标题     dd: 列表项    例如：    <dl>        <dt>第一条</dt>        <dd>不得随地吐痰</dd>        <dd>不得爆粗口</dd>        <dt>第二条</dt>        <dd>上课不的迟到</dd>    </dl>

8、html的各种标签-超链接：

3种超链接:a. 外部连接: 连接到一个外部文件。b. 锚连接： 是指连接到本页面或者其他页面的特定位置。指给超链接起一个名字，使用name属性给超链起名字。c. 邮件连接：mailto:xugang@itcast.cn。    属性：target: 告诉浏览器怎么显示目标页面     HTML中已定义4个值：        _self :在同一个浏览器中显示        _blank: 打开新的浏览器显示        _parent: 在父窗口中显示        _top: 在顶级窗口中显示例如：    <a href = "01-排版标签.html" name = "a" target = "_blank">01-排版标签.html</a>//锚连接    <a href = "mailto:xugang@itcast.cn">进入我的邮箱</a>//邮件连接

9、html的各种标签-表格标记：

<table>：表格    属性：        border:边框        width:宽度        height：高度        align:表格的对齐方式        cellpadding:单元格内容到边的距离        cellspacing:单元格和单元格之间的距离        bgcolor:背景颜色        background:背景图片        bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色        bordercolordark: 表格的右，下边框，以及单元格上，左的边框的颜色        dir:单元格内容的排列方式 取值：ltr 从左到右， rtl:从右到左    <tr>:行        属性：            dir:            bgcolor:    <td>:单元格        属性：             align: 内容的横向对齐方式            valign: 内容的纵向对齐方式 top,middle,bottom            width: 绝对值或者相对值(%)            height:单元格的高度    单元格的合并：        colspan: 横向合并        rowspan: 纵向合并    <caption>: 表格的标题.    <th>: 相当于<td> + <b>        属性同<td>    <tbody> ：表的body    <thead>：表头    <tfoot>：表尾                    备注：        1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。                    2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容例如：<table border = "1" width = "500" height = "300" align = "center" cellpadding = "" cellspacing = "20"    bordercolordark = "red" bordercolorlight = "green" bgcolor = "" background = "" dir = "rtl">    <tbody>        <tr bgcolor = "#00cc00" >           <td bgcolor = "red" >刘德华</td>           <td background = "images/2.gif">51</td>           <td align = "center">男</td>           <td valign = "bottom">香港</td>        </tr>        <tr>           <td rowspan = "2">成龙章子怡</td>           <td>58</td>           <td>男</td>           <td>香港</td>        </tr>    </tbody>    <tfoot>        <tr>           <td>35</td>           <td colspan = "2">北京</td>        </tr>    </tfoot>    <thead>        <tr >            <th>姓名</th>            <th>年龄</th>            <th>性别</th>            <th>地址</th>        </tr>    </thead>  <caption align = "bottom">学员信息</caption></table>

10、html的各种标签-框架标记：

框架页面上不允许有body标签frameset: 框架的集合    rows: 纵向分部框架.     cols: 横向分部框架.    写法有两种:        1) 绝对值  "200,*" ,*代表剩余的        2) 相对值  "30%,*"frame: 框架. 一个框架显示一个页面    scrolling: 是否需要滚动条。默认是true    noresize : 固定框架大小    bordercolor: 给框架边框起一个颜色    name : 给框架起一个名字内嵌框架： 嵌入在一个页面上的框架.(仅仅IE支持)iframe:    属性：    width: 宽度    height： 高度    scrolling : 是否需要滚动条例如：<frameset rows = "200,*">    <frame src = "top.html"></frame>    <frame src = "bottom.html"></frame></frameset>

11、html的各种标签-表单标记：

<form></form>：表单标记    例如：    <form action = "02-字体标签.html" method = "get"><input>：    type = "text" 普通输入框        例如：        姓名：<input type = "text" value = "请输入姓名" size = "50" name = "name" ><br>        注意：name是提交给服务器的字段，value是提交给服务器的值    type = type = "password" 密码输入框        例如：        密码：<input type = "password" value = "请输入姓名" size = "50" ><br>    type = "hidden" 隐藏框        例如：        隐藏框：<input type = "hidden" value = "请输入姓名" size = "50"><br>    type = "radio" 单选框        例如：        性别：<input type = "radio" name = "gender" value = "male" checked>男<input type = "radio" name = "gender" value = "female">女<br>        注意：name必须要一致才能作为一个组。checked设置默认选择    type = "checkbox" 复选框        例如：        爱好:<input type = "checkbox" name = "love" value = "eat" checked>吃饭             <input type = "checkbox" name = "love" value = "sleep" checked>睡觉             <input type = "checkbox" name = "love" value = "study" checked>学java<br>    type = "button" 普通按钮        例如：        <input type = "button" value = "普通按钮" onclick = "alert(this.type)">        就是普通的一个按钮，不会携带数据        第二种写法：        <button onclick = "alert('大家好')">普通按钮</button>    type = "submit" 提交按钮        例如：        <input type = "submit" value = "提交按钮">        将页面填写的信息提交给其它页面，会放到url的后面       例如： file:///D:/BaiduYunDownload/day01_html/day01_html/上课示例/02-字体标签.html?gender=male&country=china&love=eat&love=sleep&love=study&xueli=大学&xueli=高中&xueli=小学    type = "reset" 重置按钮        例如：        <input type = "reset" value = "重置按钮">        重置页面的填写信息    type = "image" 图片按钮        例如：        <input type = "image" src = "images/1.jpg" width = "80" height = "30"><select></select>：清单列表。    例如：    学历：<select name = "xueli" multiple>               <option value = "大学">大学</option>               <option value = "高中">高中</option>               <option value = "小学">小学</option>        </select><textarea></textarea>说明文本    例如：    备注:<textarea rows = "5" cols = "20" >大神留点话吧</textarea><br>      5行20列<fieldset></fieldset>：显示一个边框区域    里面有个<legend>选填信息</legend>显示提示信息的一个完整的例子参考：<form action = "02-字体标签.html" method = "get">    <fieldset>        <legend>必填信息</legend>        姓名：<input type = "text" value = "请输入姓名" size = "50" readonly disabled><br>        密码：<input type = "password" value = "请输入姓名" size = "50" ><br>        隐藏框：<input type = "hidden" value = "请输入姓名" size = "50"><br>        性别：<input type = "radio" name = "gender" value = "male" checked>男<input type = "radio" name = "gender" value = "female">女<br>    </fieldset>    <br>    <fieldset>        <legend>选填信息</legend>        国籍:<input type = "radio" name = "country" value = "china" checked>中国<input type = "radio" name ="country" value = "america">美国<br>        爱好:<input type = "checkbox" name = "love" value = "eat" checked>吃饭        <input type = "checkbox" name = "love" value = "sleep" checked>睡觉        <input type = "checkbox" name = "love" value = "study" checked>学java<br>        学历：<select name = "xueli" multiple>               <option value = "大学">大学</option>               <option value = "高中">高中</option>               <option value = "小学">小学</option>        </select>        备注:<textarea rows = "5" cols = "20" >大神留点话吧</textarea><br>    </fieldset>    <input type = "button" value = "普通按钮" onclick = "alert(this.type)">    <input type = "submit" value = "提交按钮">    <input type = "reset" value = "重置按钮">    <input type = "image" src = "images/1.jpg" width = "80" height = "30"></form>

12、html的各种标签-多媒体标记：

<bgsound>：播放背景音乐    例如：        <bgsound src = "test.mp3" loop = "3"></bgsound><embed>：播放多媒体文件。    例如：    <embed src = "天仙子.mp3" autostart = "false" volume = "0" loop = "5"></embed>    volume是默认的音量大小<marquee>：文本的移动    属性：    direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px    behavior: 行为方式 取值：slide,alternate,scroll    scrollamount : 移动速度    loop: 循环多少圈。负值表示无限循环    scrolldelay: 移动一次休息多长时间。单位是毫秒一个完整的例子参考：    <body>    <embed src = "天仙子.mp3" autostart = "false" volume = "0" loop = "5"></embed>     <marquee  behavior = "alternate" >我来啦</marquee>    <marquee  behavior = "scroll" scrollamount = "50" loop = "3" scrolldelay = "1000">我来啦</marquee>    <marquee direction = "up" behavior = "slide" width = "300"  height = "300" bgcolor = "#ff9999" >我来啦</marquee></body>

12、html的各种标签-头标记：

一个完整的例子参考：<body bgcolor = "" background = "" text = "red" link = "red" alink = "blue" vlink = "yellow" leftmargin = "0" topmargin = "0">    大家好    <a href = "#">你好</a>    <label onclick = "alert(this.innerHTML)">林志玲</label></body>里面的一些属性    link 链接的颜色    alink 鼠标点击链接但没有松开的颜色    vlink 点击链接之后的颜色

0 0