zoukankan      html  css  js  c++  java

  • HTML

    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>

    　　<head></head>

    　　<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>&nbsp;&nbsp;<a href="#">新浪</a>

    　　大于号 > &gt;

    　　小于号 < &lt;

    　　引号 "  &quot;

    　　版权符号  &copy;     &copy;2013-2019jj

    9、列表标签

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

    　　<ul>

    　　<li>123</li>

    　　<li>456</li>

    　　</ul>

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

    　　<ol>

    　　<li>qwe</li>

    　　<li>sad</li>

    　　</ol>

    　　3、自定义列表

    　　<dl>

    　　<dt>标题</dt>

    　　<dd>内容</dd>

    　　</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、图像标签

    　　<img src=”xxx/xxx.jpg” alt=”说明” title=”111” width=”220px” height=”110px”/>

    　　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>单元格列标签

    　　　　　　<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.多行文本标签

    　　　　<textarea>内容</textarea>

    　　4.下拉列表框

    　　　　<select name=”select”>

    　　　　<option value=”111” selected=”selected”>111</option>

    　　　　<option>222</option>

    　　　　<option>333</option>

    　　　　</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 rows=”30%,*”>

    　　　　<frame src=”” name=””>

    　　　　<frameset cols=”15%,*”>

    　　　　　　<frame/>

    　　　　　　<frame/>

    　　　　</frameset>

    　　</frameset>

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

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

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

    　　src用来引入页面

    　　noresize 不能通过拖动改变大小

    　　name用来给超链接target使用

    17、内嵌框架

    <iframe src="the_second.html"width="400px" height="236px" scrolling="no" >

    　　<iframe></iframe>

    </iframe>

    　　scrolling表示滚动条

     
  • 相关阅读:
    Linux下防火墙的相关命令
    java中的异常总结
    Java中的==和equals的区别
    一个简单的前后端分离项目，适合新手练手
    入住博客园鸭
    centos7 安装 Python PIL模块
    Linux 装机错误解决
    Python 爬取煎蛋网妹子图片代码
    Python 简易聊天机器人
    Python员工信息表练习
  • 原文地址：https://www.cnblogs.com/xfdhh/p/11334392.html
Copyright © 2011-2022 走看看