• 15-02-14 HTML


    HTML 超文本标记语言,在HTML当中存在着大量的标签,我们用HTML提供的标签,将要显示在网页中的内容包含起来,就构成了 我们的网页;

    网页中有什么东西,由HTML决定,这些内容长成什么样子由CSS决定;

    HTML仅仅是用来控制网页的,网页长什么样,由CSS决定;

    HTML+CSS构成了我们看到的漂亮的网页;CSS控制网页内容显示的效果;

    HTML+CSS做出来的是静态网页;静态网页,没有什么效果,就一个展示的功能;

    JS+JQuery能使网页有动态效果;

    <html>

    <head>

    <title></title>

    </head>

    <body>

    </body>

    </html>

    HTML是不区分大小写的语言; 要将内容显示在网页上,就写在body标签中,

    <p></p>段落标签;

    &nbsp空格标签; 

    在HTML按很多歌空格键只会有一个空格,要使空格增多,就必须加&nasp;

    <h#></h#> #1-6 标题标签,h1最大;

    <img src = "C:....."  width="200px" heigth ="200px" border = "1px" alt="原来是美女呀" title="还行吧"/> 图像标签,

    HTML中属性是以属性名="值"的形式;,属性与属性之间通过一个空格隔开;

    <!-- 要注释的内容 --> html注释符;

    alt:当图片由于某些原因显示失败的时候所显示的文本

    title:当光标移动到图片上的时候显示的文本;

    html元素有始有终;html可以嵌套

    <hr/> 水平分割线; 

     用p标签来换行,那么行与行之间有间隙,用br来换行,行与行之间不会有间隙;

    > (&gt)   <(&lt)  &(&amp)  空格(&nbsp)

    属性的值建议用引号括起来;属性建议均以键值对的形式括起来,一个标签可有多个属性,用空格分开;

    <font size="7" color="red" face="仿宋">1</font>  字体标签。size=7是最大的,face字体系列

    <b></b>加粗  <i></i>斜体  <tt></tt>打字机类型   <u>下划线</u>    <s>删除线</s>  <sup></sup>上标  <sub></sub>下标

    <pre></pre>标签相当于C#的@符号,怎么编辑,怎么打印

    <marquee direction ="right"  behavior="slide" ></marquee> 用来显示元素的移动 direction向哪个方向移动,

    <a href="http://www.baidu.com" target="_blank">百度</a> 超链接 href表示要链接到的地址 target打开新网页的方式 target="_blank"在新的页面上打开链接, 不加这个的话在原来页面上跳转   target="_self"在原来页面上跳转

    <a></a>实现页面内部的跳转; <a name = "dingduan" href = "#diduan"></a>

    通过一个页面 <a name = "diduan"   href = "a.html#dingduan“></a>  可以跳到其他页面  其实就是标签与标签之间的跳转;

    <a href="mailto:739606538@qq.com"></a>   <a></a>标签还可以发送邮件

    不只文字可以超链接,图片也可以 <a href = "#"></a> 是超链接,但是不会跳转;

    <body text="green" link="pink" alink="black" vlink="green"  bgcolor="pink" background="1.jpg" >  //text body中的文本颜色  link body中超链接的颜色  alink body中超链接按下时候的颜色  vlink body中超链接按过后的颜色 bgcolor body中背景颜色 background body中背景图片; </body>

    <ul type = "disk"> //type指的是前面的类型 <li></li> 列表中的每一项 </ul>无序列表

    <ol type = "a"> //type指的是从什么开始,默认是1开始的; <li></li> </ol>有序列表

    <dl>

    <dt></dt>

    <dd></dd>

    <dd></dd>

    <dd></dd>

    <dt></dt>

    <dd></dd>

    <dd></dd>

    <dd></dd>

    <dd></dd>

    </dl>

    <table border="1" cellspacing="0px" cellpadding="5px">

    <tr>    

    <td>单元格内容</td>

    </tr>

    <tr>   

     <td>单元格内容</td>

    </tr>

    </table>

    cellspacing 单元格与单元格之间的距离

    cellpadding 文字离边框的距离;

    在<table>中行数列数要数多的;

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <table border="1px" cellspacing="0px" cellpadding="0px" >

    <tr>

    <td colspan="2">学生成绩</td>

    </tr>

    <tr>

    <td>语文</td>

    <td>98</td>

    </tr>

    <tr>

    <td>数学</td>

    <td>95</td>

    </tr>

    </table>

    </body>

    </html>

    单元格跨列用colspan属性来实现 

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <table border="1px" cellspacing="0px" cellpadding="0px" height="100px" width="280">

    <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>95</td>

    </tr>

    </table>

    </body>

    </html>

    单元格跨行用rowspan属性来实现

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <table border="1px" cellspacing ="0px" cellspadding="0px" height ="100px" weight = "100px">

    <tr>

    <td><font color = "blue">手机充值,IC卡</font></td>

    <td colspan="3"><font color = "blue">手机充值,IC卡</font></td>

    </tr>

    <tr>

    <td rowspan = "3">各种卡的总汇</td>

    <td>铅笔</td>

    <td>铅笔</td>

    <td>铅笔</td>

    </tr>

    <tr>

    <td>铅笔</td>

    <td>铅笔</td>

    <td>铅笔</td>

    </tr>

    <tr>

    <td>铅笔</td>

    <td>铅笔</td>

    <td>铅笔</td>

    </tr>

    </table>

    </body>

    </html>

    如果看到表格中的加粗的,可以把它的<td></td>换为<th></th>,<th>是表格的标题;

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <table border="1px" cellspacing="0px" cellpadding="0px" height="100px" width="280">

    <tr>

    <th colspan="3" >学生基本情况</th>

    </tr>

    <tr>

    <th>姓名</th>

    <th>性别</th>

    <th>专业</th>

    </tr>

    <tr>

    <td>刘备</td>

    <td>男</td>

    <td rowspan = "3">计算器</td>

    </tr>

    <tr>

    <td>孙尚香</td>

    <td>女</td>

    </tr>

    <tr>

    <td>诸葛亮</td>

    <td>男</td>

    </tr>

    </table>

    </body>

    </html>

    <table></table>的属性bgcolor border bordercolor cellspacing cellpadding width height

    <td></td>的属性 align valign colspan rowspan width height bgcolor

    align : left center right    控制文本在单元格中的左中右位置

    valign : top middle botton    控制文本在单元格中的上中下位置

    设置网页中元素的外观,我们会用CSS

    在网页中使用表单的作用就是向服务器传输数据;<form></form> HTML表单是用于搜集用户输入的,HTML表单都扩在一对<form>标签中,

    <form>的常用属性 action 表示提交的目标服务器 method 提交的方法get post get默认,(以url提交,就是以地址栏的方式提交) post通过报文提交;

    表单里面的元素全是input标签,只不过类型不一样,

    <input type ="text" name = "txtName"/>

    <input type ="password" name = "txtPwd"/>

    <input type ="submit" value = "提交">

    <input type = "reset" value= "重置">

    <fieldset>

    <legend>性别</legend>

    <input type ="radio" name="sex"/>男<br/>

    <input type ="radio" name="sex"/>女<br/>

    </fieldset>

    <fieldset>

    <legend>婚姻状况</legend>

    <input type ="radio" name="married"/>已婚<br/>

    <input type ="radio" name="married"/>未婚<br/>

    </fieldset>

    wiform后台拿到前面空间的对象,通过name去拿;html也是一样,要设置一个name属性; <fieldset>能分成一个一个区域;

    <select>

    <optgroup label="河北省">

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    </optgroup>

    <optgroup label="河南省">

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    </optgroup>

    <optgroup label="湖北省">

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    </optgroup>

    <optgroup label="湖南省">

    <option>1</option>

    <option>2</option>

    <option>3</option>

    <option>4</option>

    </optgroup>

    </select>

    <select></select>相当于combox

    <input type = "file">

    <textarea cols = "20" rows = "3">  </textarea> 文本域

     <html>

    <head>

    <title></title>

    </head>

    <body>

    <form action="http://www.baidu.com" method="get">

    <table border="1px" cellspadding = "0px"  cellspacing="0px">

    <tr>

    <td>用户名</td>

    <td><input type="text" name="txtName"/></td>

    </tr>

    <tr>

    <td>密码</td>

    <td><input type="password" name="txtPwd"/></td>

    </tr>

    <tr>

    <td>验证码:</td>

    <td><input type = "text" name="txtJudge"/><img src="image1.jpg"></td>

    </tr>

    <tr>

    <td></td>

    <td><input type = "checkbox" name="txtRem"/>记住密码</td>

    </tr>

    <tr>

    <td></td>

    <td><input type = "submit"/><input type = "reset"/> 记住密码</td>

    </tr>

    </table>

    </form>

    </body>

    </html>

    给网站布局div比table更为好用;

    div标签独占一行;span标签不独占一行;

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <div style="background:red;height:50px;300px">我是一个div</div>

    <span>哈哈哈哈</span>

    </body>

    </html>

    一般对文本设置样式的时候一般都扔到span里面去,span标签专门修饰文本,在布局的时候用到div

    <html>

    <head>

    <title>左边的页面</title>

    </head>

    <body bgcolor="pink">

    <a href = "www.mop.com" target="Right">猫扑</a>

    <a href = "www.dapengti.com" target="Right">打喷嚏</a>

    <a href = "www.cnbeta.com" target="Right">cnbeta</a>

    <a href = "www.51aspx.com" target="Right">51aspx</a>

    </body>

    </html>

    left.html

    <html>

    <head>

    <title>右边的页面</title>

    </head>

    <body bgcolor="green">

    i'm right

    </body>

    </html>

    right.html

    <html>

    <head>

    <title>上边的页面</title>

    </head>

    <body bgcolor="yellow">

    i'm top

    </body>

    </html>

    作为框架页面的承载页面是不允许有<body>标签的,用<frameset></frameset>来代替;

    <html>

    <head>

    <title></title>

    </head>

    <frameset rows="15%,*">  

         <frame src="top.html"  noresize="noresize"/>

            <frameset cols="30%,*">  

                <frame src="left.html"  noresize="noresize"/>   

                <frame src="right.html" name = "Right" />

            </frameset>

       </frameset>

    </html>

    里面的页面也可以作为承载页;

  • 相关阅读:
    win10下以管理员身份打开hosts文件
    使用Dockerfile构建镜像命令自己的理解
    我们在删除镜像的时候被告知有容器正在使用,可是容器已经被停止了
    Docker构建镜像过于缓慢解决-----Docker构建服务之部署和备份jekyll网站
    VMware虚拟机ubuntu显示屏幕太小解决办法
    树莓派3B从装系统到安装RYU过程
    树莓派3b 换国内源 更新源
    Raspbain系统无屏幕无网线通过ssh远程连接树莓派设置wifi步骤
    Mplayer 隐藏边框和显示位置的方法
    使用mplayer查看摄像头
  • 原文地址:https://www.cnblogs.com/hhsfrank/p/4292287.html
Copyright © 2020-2023  润新知