HTML

两个比较好用的网站

https://www.runoob.com/

https://www.w3school.com.cn/

1、什么是HTML？

HTML（Hyper Text Markup Language）超文本标记语言。

超文本：页面中有文字，有图片，有视频，链接等等非文字内容

标记：使用标签的方式将想要展示的内容包起来

2、超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

3、HTML文件的扩展名.html，它不是一个编程语言，只是一个文档标记

4、HTML文件的传输基于http协议

5、基本结构

　　<html>

　　<body>

　　　　Hello world

　　</body>

　　</html>

6、编写规则

　　1.html文档内容由标签和文本内容组成。

　　2.html的标签是由w3c组织规定好的，不能随意编写。

　　3.html标签不区分大小写。（建议使用小写字母）

　　4.开始标签和结束标签要成对出现。

　　5.在编写html时，要注意缩进，编写出层次结构。

7、主要标签及作用

　　<html></html>将整个html文件内容包在里面

　　<head></head>头部标签，头部中包含的标记是页面的标题、序言、说明等内容，本身不显示在文件中，但影响网页显示的效果

　　<title></title>网页的标题

　　<meta charset=”utf-8”></meta>设置浏览器用utf-8编码格式查看当前网页;

　　<meta name=”keywords” content=”购物”>设置搜索关键字

　　<meta name=”description” content=”国内最大的……" >设置网页描述

　　<meta http-equiv="refresh" content="3;url=www.baidu.com" />设置自动刷新，3秒后跳转到指定页面

　　<script></script>里面写javascript代码

　　<style></style>里面写css代码

　　<link>引入其他文件如css文件

　　<base>设置页面链接前缀

　　<body></body>网页中显示实际内容的标签

　　<h1></h1> ~<h6></h6>标题标签

　　<p></p>段落标签增大了行间距

　　<br/>换行标签

　　<hr/>水平线标签属性size设置粗细，width设置宽度,color设置颜色, align对齐方式

　　<strong></strong> <b></b>加粗

　　<em></em> <i></i>斜体

　　<div></div>独占一行

8、注释和特殊符号

　　空格 <a href="#">百度</a>  <a href="#">新浪</a>

　　大于号 > >

　　小于号 < <

　　引号 " "

9、列表标签

　　1.无序列表 type 列表符号disc 实心圆; circle空心圆;square方块

　　<ul>

　　</ul>

　　2、有序列表 type 序号格式 a字母 I罗马数字 1数字

　　<ol>

　　</ol>

　　3、自定义列表

　　<dl>

　　</dl>

　　4、代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>无序列表</h1>
        
        <ul> 
           <li>AAA</li>
           <li>BBB</li>
           <li>CCC</li>
           <li>DDD</li>
           <li>EEE</li>
        </ul>
        <hr/>
        <ul type="circle"> <!-- disc默认 实心圆  circle 空心圆   square方块-->
           <li>AAA</li>
           <li>BBB</li>
           <li>CCC</li>
           <li>DDD</li>
           <li>EEE</li>
        </ul>
        
        <h1>有序列表</h1>
        <ol> 
           <li>AAA</li>
           <li>BBB</li>
           <li>CCC</li>
           <li>DDD</li>
           <li>EEE</li>
        </ol>
        
        <ol type="a"> 
           <li>AAA</li>
           <li>BBB</li>
           <li>CCC</li>
           <li>DDD</li>
           <li>EEE</li>
        </ol>
        
        <ol type="I"> 
           <li>AAA</li>
           <li>BBB</li>
           <li>CCC</li>
           <li>DDD</li>
           <li>EEE</li>
        </ol>
        
        <h1>定义列表</h1>
        <dl>
            <dt>标题</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
        </dl>
    </body>
</html>

列表

10、图像标签

　　Src 图片路径

　　Alt 图片加载失败时的提示内容

　　width 图片的宽度

　　height 图片的高度

　　border 图片边框

11、超链接

　　<a href=”链接地址”target=”打开链接的位置”>显示在页面上的内容</a>

　　href 链接地址除了地址外还可以写锚点需设置锚点

　　href=”#top” <a name=”top”>返回顶部</a>

　　target选择打开连接的位置

　　“_self”在当前窗口打开

　　“_blank”在新窗口打开，每次点击都会打开新窗口

　　“new”在新窗口打开，只会打开一次

　　“_search”在新窗口打开，只会打开一次

　　“_parent”在父窗口打开

　　“_top”在顶层窗口打开

12、span块级标签不换行

13、font字体标签

14、<table></table>表格标签

　　1.属性

　　cellspacing单元格之间的间距

　　cellpadding 单元格内容到单元格的距离

　　align单元格对齐方式

　　border边框

　　width单元格宽度

　　bgcolor单元格背景颜色

　　2.格式：

　　<table >单元格标签

　　　　<tr>单元格行标签

　　　　　　<td></td>单元格列标签

　　　　</tr>

　　</table>

　　3.跨行和跨列

　　　　colspan 跨列

　　　　rowspan 跨行

　　4.caption th thead tbody tfoot

　　　　caption表头标签,始终处于表格上方的正中间位置

　　　　th 替换td 文字默认居中加粗

　　　　thead 用来写表的第一行

　　　　tfoot 用来写表的最后一行

　　5.代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <table cellspacing="0" align="center" border="1px" width="600px" bgcolor="blanchedalmond">
             <tr bgcolor="aqua">
                 <td bgcolor="red" align="center">11</td>
                 <td>12</td>
                 <td>13</td>
             </tr>
             
             <tr align="center">
                 <td>21</td>
                 <td>22</td>
                 <td>23</td>
             </tr>
             
             <tr>
                 <td>31</td>
                 <td>32</td>
                 <td>33</td>
             </tr>
         </table>
    </body>
</html>

表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <table border="1px" width="200px">
             <tr>
                 <td colspan="2">学生成绩</td>
             </tr>
             
             <tr>
                 <td>语文</td>
                 <td>98</td>
             </tr>
             
             <tr>
                 <td>数学</td>
                 <td>95</td>
             </tr>
             
         </table>
         
         <hr />
         
         <table border="1px" width="300px">
             <tr>
                 <td rowspan="2">张三</td>
                 <td>语文</td>
                 <td>98</td>
             </tr>
             
             <tr>
                 
                 <td>数学</td>
                 <td>95</td>
             </tr>
             
             <tr>
                 <td rowspan="2">李四</td>
                 <td>语文</td>
                 <td>88</td>
             </tr>
             
             <tr>
                 
                 <td>数学</td>
                 <td>100</td>
             </tr>
         </table>
         
         <hr/>
         
         <table border="1px" width="300px">
             <tr>
                <td colspan="3">学生成绩</td>
               
             </tr>
             
             <tr>
                <td rowspan="2">张三</td>
                <td>语文</td>
                <td>98</td>
             </tr>
             
             <tr>
                <td>数学</td>
                <td>95</td>
             </tr>
             
             <tr>
                <td rowspan="2">李四</td>
                <td>语文</td>
                <td>88</td>
             </tr>
             
             <tr>
                <td>数学</td>
                <td>100</td>
             </tr>
         </table>
    </body>
</html>

跨行和跨列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table align="center" width="50%">
        <caption>年终数据报表</caption>    
          <thead bgcolor="aqua">
                <tr>
                    <th>月份</th>
                    <th>收入(RMB)</th>
                </tr>
           </thead>
           
           <tbody bgcolor="cadetblue">
                <tr>
                    <td>1月</td>
                    <td>100</td>
                </tr>
                
                <tr>
                    <td>2月</td>
                    <td>200</td>
                </tr>
                
                <tr>
                    <td>3月</td>
                    <td>300</td>
                </tr>
                
                <tr>
                    <td>4月</td>
                    <td>400</td>
                </tr>
                
                <tr>
                    <td>5月</td>
                    <td>500</td>
                </tr>
                
                <tr>
                    <td>6月</td>
                    <td>600</td>
                </tr>
           </tbody>
           
           <tfoot bgcolor="gold">
                <tr>
                    <td>平均月收入</td>
                    <td>350</td>
                </tr>
                
                <tr>
                    <td>总计</td>
                    <td>2100</td>
                </tr>
           </tfoot>
        </table>
    </body>
</html>

thead th tfoot

15、表单

　　1.简介

　　　　<form action=”” method=””></form>收集数据的标签

　　　　action表单提交路径

　　　　method 表单提交方式，get(显示)和post(不显示)

　　　　单行<input type=””name=””value=””size=””maxlength=””/>

　　　　type标签类型

　　　　name标签名称

　　　　value默认值

　　　　size长度

　　　　maxlength最多多少字符

　　2.类型介绍 type=””

　　　　text 文本标签

　　　　password 密码标签

　　　　radio 单选标签

　　　　checkbox 复选标签

　　　　file 文件框

　　　　hidden 隐藏域

　　　 image 图片标签

　　　　button 按钮

　　　　submit提交按钮

　　　　reset重置按钮

　　　　date时间类型

　　　　email邮箱标签

　　3.多行文本标签

　　4.下拉列表框

　　　　</select>

　　　　name:后台使用这个标签获取值

　　　　Selected:默认选中

　　5.id readonly disabled

　　　　id属性值唯一 readonly可将标签设置为只读

　　　　Disabled 可以将标签设置为不可用

　　6.代码

<!DOCTYPE html>

<html>

    <head>
        
        <meta charset="utf-8">
        
        <title>表单标签</title>
    
</head>
    
<body>
        <center>
            <form action="1.html" method="get">
                <table cellpadding="8px" bgcolor="lightyellow" width="700px" cellspacing="0px">
                    <tr>
                        <td align="right" width="30%">名称:</td>
                        <td><input type="text" name="username"/></td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">账号:</td>
                        <td><input type="text" name="accid"/></td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">密码:</td>
                        <td><input name="password" type="password"/></td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">性别:</td>
                        <td>男<input name="sex" type="radio"/>
                            女<input name="sex" type="radio" checked="checked"/>
                        </td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">兴趣爱好:</td>
                        <td>学习<input name="hobby" type="checkbox"/>
                            敲代码<input name="hobby" type="checkbox" checked="checked"/>
                            打游戏<input name="hobby" type="checkbox" checked="checked"/>
                        </td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">学校:</td>
                        <td><select>
                            <option>清华大学</option>
                            <option>北京大学</option>
                            <option>中公教育</option>
                            <option selected="selected">蓝翔技校</option>
                        </select>
                        </td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">头像:</td>
                        <td><input name="photo" type="file"/></td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">自我介绍:</td>
                        <td>
                            <textarea cols="50" rows="13"></textarea>
                        </td>
                        
                    </tr>
                    <tr>
                        <td align="right" width="30%">注册时间:</td>
                        <td><input type="date" name="date"/></td>
                        
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input type="submit" />&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="reset" />
                            
                        </td>
                        
                        
                    </tr>
                    
                    
                </table>
                
                
            </form>
            
        </center>
    
    </body>            

</html>

表单

16、页面框架

　　　　</frameset>

　　frameset用来将页面分为不同的部分

　　rows=”30%,*”将页面上下分为2部分，分别占30%和剩余

　　Cols=”15%,*”将本框架部分水平分为2部分。。。

　　src用来引入页面

　　noresize 不能通过拖动改变大小

　　name用来给超链接target使用

17、内嵌框架

</iframe>

　　scrolling表示滚动条

posted on 2019-08-11 11:31 幸福的小耗子阅读(187) 评论(0) 编辑收藏举报