美文网首页
HTML 基础(一)

HTML 基础(一)

作者: 焰火青春 | 来源:发表于2020-05-20 11:22 被阅读0次

    HTML 基础

    web 前端开发需要掌握:html、css样式、JavaScript语言 。

    • HTML是网页内容的载体:内容即网页中所呈现出来的信息,如图片、文字、视频等。
    • CSS样式是表现:网页的外衣,如字体颜色、大小等,所有用来改变内容外观的东西称之为表现。
    • JavaScript是用来实现网页上的特殊效果:如焦点新闻的轮换,鼠标滑过弹出下拉菜单等效果。

    1、HTML介绍

    1.1、html 标签

    1.1.1、关于编辑需要注意的几点

    头部(head)中的 content-type 中设置的 charset 是告诉浏览器打开该文件的编码方式。

    需要注意的是,如果使用记事本编辑,保存的时候使用另存为选择与 charset 设置的一样的编码方式。浏览器打开文件的编码方式应与文件 编码方式一致,否则出现乱码。

    • <h1>......</h1>:标题标签
    • <p>......</p>:段落标签
    • <img scr='1.jpg'>:图片标签
    <!--html 示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
            <title>Html和CSS的关系</title>
            <style type='text/css'>
            h1{
                font-size:24px;
                color:#930;
                text-align:center;
            }
            </style>
        </head>
        <body>
            <h1>勇气</h1>
            <p>三年级时,我还是一个胆小如鼠的女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没有勇气参加。</p>
            <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学读举手了,甚至成绩比我差很多的,也举手了,还说着:“我来,我来。”我环顾了四周,就我没有举手。</p>
        </body>
    </html>
    

    1.1.2、标签语法

    • 标签游英文尖括号<>括起来的,如<head>
    • html 中的标签成对出现,由开始标签和结束标签(比开始多一个 /)
    • 标签与标签间可以嵌套,但要保证先后顺序,如<div><p>......</p></div>
    • html 标签不区分大小写,但尽量小写。

    1.2、 html 文件基本结构

    <html>    <!--根标签-->
        <head>...</head>   <!--头部-->
        <body>...</body>   <!--身体-->
    </html>
    
    • 所有网页标签都在 <html></html> 中
    • <head> 标签用于定义文档头部,是所有头部元素的容器。头部元素有 <title>、<script>、<style>、<link>、<meta>等标签
    • <body>和</body> 间是网页的主要内容,如<h1>、<p>、<a>、<img> 等,这些都会在浏览器中显示

    1.3、head 标签

    文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部的数据都不会作为内容显示给读者。

    <!--head 标签示例-->
    <head>
        <title>...</title>
        <meta>
        <link>
        <style>...</style>
        <script>...</script>
    </head>
    

    <title> 标签(元素):

    • 网页标题的信息
    • 定义浏览器工具栏中的标题
    • 提供页面被添加到收藏夹时的标题
    • 显示在搜索引擎结果中的页面标题

    2、认识标签(第一部分)

    2.1、标签的语义化

    标签的语义化可以明白每个标签的用途,如标题就用标题标签(h1)、段落内容用(p),强调用(em/strong)等等。好处就是:

    • 更容易被搜索引擎收录
    • 更容易让屏幕阅读器读出网页内容

    2.2、body 标签

    网页上显示的内容就放在 body 标签里

    <!--body 标签示例-->
    <body>
        <h1>
            了不起的盖茨比
        </h1>
        <p>
            1922年的一个春天...
        </p>
    </body>
    

    2.3、p 标签(段落)

    要使网页上显示文章,就需要添加 <p> 标签,把文章段落放到 <p> 标签中。

    <p>段落文本</p>
    
    • 一段文字一个 <p> 标签
    • <p> 标签默认样式,段前段后有空白,可使用 css 删除或改变

    2.4、hx 标签(标题)

    文章标题使用 hx 标签,总共有 6 级(h1、h2、h3、h4、h5、h6),h1 为最高等级。

    <hx>标题文本</hx>
    
    • h1 标签一般用于作为网站名称,如腾讯网站中的腾讯网三个字
    • hx 标签默认样式加粗,h1 最大

    2.5、em 和 strong 标签(强调)

    如果一段话中想强调某几个文字,可以使用 em 或 strong 标签,二者的区别:

    标签名称 强调等级 默认样式
    em 斜体
    strong 粗体
    <!-- 默认样式可以使用 css 修改-->
    <em>需要强调的文本</em>
    <strong>需要强调的文本</strong>
    

    2.6、span 标签

    span 标签没有语义,它的作用是:为文字设置单独的样式

    <span>文本</span>
    
    <!--span 标签示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
            <title>了不起的盖茨比</title>
            <style>                                     /*添加样式,设置文本颜色*/
            span{
            color:blue 
            }
            </style>
        </head>
        <body>
            <h1>了不起的盖茨比</h1>
            <p>1922年的春天,一个想要成名的作家只身来到美国,想着他的<span>美国梦</span>。</p>   <!--将美国梦三个字设置为蓝色-->
        </body>
    <html>
    

    2.7、q 标签(短文本引用)

    网页文章里如果想引用某个诗人的一句诗,使文章更出彩,那么可以使用 q 标签。

    须注意的是,引用的文本不需要加双引号(浏览器会自动加)

    <q>引用文本</q>
    
    <!--q 标签示例-->
    <!--浏览器上显示结果被引用的诗句被添加了双引号-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content=text/html; charset=utf-8'>
            <title>q标签</title>
        </head>
        <body>
            <h1>q标签</h1>
            <p>周瑜,不可否认,他是历史上一个了不起的英雄人物!确实也配得上那句<q>聪明秀出为之英,胆略过人为之雄 。</q></p>
        </body>
    </html>
    

    2.8、blockquote 标签(长文本引用)

    q 标签引用的是短文本,一句话或者一句诗。而当要引用长文本如长文、整篇诗句那么则可以使用 blockquote 标签。

    浏览器对 blockquote 标签的默认样式是前后缩进

    <blockquote>引用的文本</blockquote>
    
    <!--blockquote 标签示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content=text/html; charset=utf-8'>
            <title>blockquote标签</title>
        </head>
        <body>
            <h1>心似桂花开</h1>
            <p>大家都在忙于自认为最重要的事情,却没能享受到人生的乐趣,反而要吞下苦果?</p>
            <blockquote>“暗淡轻黄体性柔,情疏迹远只香留。何须浅碧深红色,自是花中第一流。”</blockquote>
            <p>这是李清照的诗句《咏桂》中的词句,在李清照看来,规划暗淡青黄,性情温柔,淡泊自适,远比那些大红大紫争奇斗艳值得称道。</p>
        </body>
    </html>
    

    2.9、br 标签(换行)

    对于一些内容分行观览效果更佳 如诗句,那么可以使用 br 标签换行。

    xhtml 1.0 写法:<br />       <!--一般使用这种方法-->
    html 2.01 写法:<br>
    
    • br 标签是空标签,也就是没有 html 内容,只需有一个开始标签。这种标签还有 <hr />、<img />。
    • html 忽略空格和回车,br 标签就相当于回车换行。
    • 只需在需要换的句子后面添加 br 标签即可。
    <!--br 标签示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content=text/html; charset=utf-8'>
            <title>blockquote标签</title>
        </head>
        <body>
            <h1>《咏桂》
            <p>
            暗淡轻黄体性柔,<br />
            情疏迹远只香留。<br />
            何须浅碧深红色,<br />
            自是花中第一流。
            </p>
        </body>
    </html>
    

    2.10、添加空格

    html 代码中输入空格和回车是没有用的,需要空格时,可以写入 &nbsp;。

    &nbsp;
    
    <!--&nbsp; 标签示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content=text/html; charset=utf-8'>
            <title>空格讲解</title>
        </head>
        <body>
            <h1>感悟梦想</h1>
            来源:作文网&nbsp;&nbsp;作者:为梦想而飞           <!-- 来源:作文网后添加两个空格-->
        </body>
    </html>
    

    2.11、hr 标签(水平横线)

    在某些信息展示时,为其添加一些用于分隔的横线,可以使文章看起来整齐些。

    • hr 标签是一个空标签,只有开始标签,没有结束标签。
    • 默认样式是粗线条,灰颜色,可以使用 css 修改。
    xhtml 1.0 版本:<hr />       <!-- 一般使用这个版本-->
    html 4.0 版本:<hr>
    
    <!--hr 标签示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content=text/html; charset=utf-8'>
            <title>blockquote标签</title>
        </head>
        <body>
            <h2>《静夜思》</h2>
            <p>
            床前明月光,<br />
            疑是地上霜。<br />
            举头望明月,<br />
            低头思故乡。
            </p>
            <hr />         # 在两个段落间添加 hr 标签
            <h2>《咏桂》</h2>
            <p>
            暗淡轻黄体性柔,<br />
            情疏迹远只香留。<br />
            何须浅碧深红色,<br />
            自是花中第一流。
            </p>
        </body>
    </html>
    

    2.12、address 标签(地址信息)

    一般网页中会有一些公司或者作者个人地址信息等,要实现这种效果可以使用 address 标签,也可以定义一个地址(如电子邮件地址、签名或文档的作者身份)。

    <address>地址</address>         <!-- 默认样式为斜体-->
    <a href='www.baidu.com'>百度</a>    <!--a 标签的 href 属性可以实现超链接跳转(默认样式为蓝色字体带下划线)-->
    

    2.13、code 标签(单行代码)

    在介绍编程语言的文章或网站上,避免不了要插入编程语言,那么可以使用 code 标签或者 pre 标签。

    • code 标签:插入一行代码
    • pre 标签:插入多行代码
    <code>代码语言</code>
    <pre>代码语言</pre>     <!--插入代码不改变代码格式-->
    
    <!--code 标签示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
            <title>code标签介绍</title>
        </head>
        <body>
            <h2>渐变效果</h2>        <!--code标签添加单行代码-->
            <p>我们可能知道水平渐变的实现,类似这样:<code>{background-image:linear-gradient(ldft, red 100px, yellow 200px);}</code>
            </p>
        </body>
    </html>
    

    2.14、pre 标签(多行代码)

    插入多行代码可以使用 pre 标签,其作用是:预格式文本(对插入的代码不改变格式),被包围在pre 元素中的文本通常会保留空格和换行符。

    需要注意的是 pre 标签不只是插入代码时才使用,当需要保证插入的文本格式不改变时也可以使用。

    <!--pre 标签示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=uft-8'>
            <title>pre 标签的使用</title>
        </head>
        <body>
            <h2>源代码</h2>
            <p><pre>                      <!--pre 标签保留原有的空格和换行符-->
                var message='欢迎';
                for(var i=1;i<=10;i++)
                {
                    alert(message)
                }
            </pre></p>
        </body>
    </html>
    

    3、认识标签(第二部分)

    3.1、ul 标签(无序列表)

    浏览网页时有很多新闻列表、图片列表,这些列表可以使用 ul-li 标签来完成,它是无序列表

    默认样式:一般为每项 li 前都自带一个圆点

    <ul>
        <li>信息</li>
        <li>信息</li>
        ......
    </ul>
    

    3.2、ol 标签(有序列表)

    与 ul 标签不同的是,ol 标签是有顺序之分的。默认样式:每项 <li> 前都自带一个序号,从 0 开始。

    <ol>
        <li>信息</li>
        <li>信息</li>
    </ol>
    
    <!--ol 标签示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
            <title>ol 标签</title>
        </head>
        <body>
            <p><ol>
                <li>前端开发面试心法</li>
                <li>零基础学习 html</li>
                <li>JavaScript 全攻略</li>
            </ol></P>
        </body>
    </html>
    

    3.3、div 标签(排版)

    在网也制作的过程中,可以把一些独立的逻辑部分划分出来,放在一个 div 标签中,其作用就好比一个容器。

    <div>...</div>
    

    逻辑部分就是页面上相互关联的一族元素。如网页中独立的“栏目板块”,就是一个典型的逻辑部分。

    • div 标签可以将网也划分为独立的版块,默认样式无边框
    • 可与 CSS 样式配合使用,设置边框大小、颜色等
    <!--div 标签与 CSS 将网页划分为两个版块-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
            <title>div 标签</title>
        </head>
        <style>
            div{
                width:300px;                      # 边框宽
                height:300px;                    # 边框长
                margin:30px auto;               # 两个边框间的间距
                border:1px solid red;           # 边框宽度、边框样式、边框颜色
                }
        </style>
        <body>
            <div>
                <h2>热门课程排行榜</h2>
                <ol>
                    <li>前端开发面试心法</li>
                    <li>零基础学习 html</li>
                    <li>JavaScript 全攻略</li>
                </ol>
            </div>
            <div>
                <h2>最新课程排行</h2>
                <ol>
                    <li>版本管理工具介绍-Git篇</li>
                    <li>Canvas绘图详解</li>
                    <li>QQ5.0策划菜单</li>
                </ol>
            </div>
        </body>
    </html>
    

    3.4、div 标签的 id 属性

    当网页中类似的独立的逻辑部分有很多时,为使逻辑更清晰,可以给逻辑部分添加一个名称。在这里我们使用 div 标签的 id 属性给独立的逻辑部分添加唯一标识,确保其唯一性。

    <div id='版块名称'>...</div>
    

    3.5、table 标签(表格)

    创建表格的四个元素:table、tbody、tr、th、td

    • tbody:不加 <thead>、<tbody>、<tfoter>,table表格加载完才显示,加上这些表格结构,tbody 包含行的内容下载完优先显示,不必等待表格结束后显示。同时如果表格很长,用 tbody 分段,可以一部分一部分显示
    • tr:表格的一行,有几对 tr 就有几行
    • th:表格表头
    • td:表格的一个单元格,一行中包含几对 td,说明一行中就有几列

    在没有添加 CSS 样式前,table表格无表格线,th 标签中的文本默认样式为粗体并居中。

    <!--table 标签示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=uft-8'>
            <title>table 标签的使用</title>
        </head>
        <body>
            <table>
                <tbody>
                    <tr>
                        <th>产品名称</th>
                        <th>品牌</th>
                        <th>库存量(个)</th>
                        <th>入库时间</th>
                    </tr>
                    <tr>
                        <td>耳机</td>
                        <td>联想</td>
                        <td>500</td>
                        <td>2013-1-2</td>
                    </tr>
                    <tr>
                        <td>U盘</td>
                        <td>金士顿</td>
                        <td>120</td>
                        <td>2013-8-10</td>
                    </tr>
                    <tr>
                        <td>U盘</td>
                        <td>爱国者</td>
                        <td>133</td>
                        <td>2013-3-25</td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>
    

    3.6、使用 CSS 样式为表格加边框

    <!--为 th,td 单元格添加粗细为一个像素的黑色边框-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=uft-8'>
            <title>table 标签的使用</title>
            <style type='text/css'>
            table tr td,th{border:1px solid #000;}
            </style>
        </head>
        <body>
            <table>
                <tbody>
                    <tr>
                        <th>产品名称</th>
                        <th>品牌</th>
                        <th>库存量(个)</th>
                        <th>入库时间</th>
                    </tr>
                    <tr>
                        <td>耳机</td>
                        <td>联想</td>
                        <td>500</td>
                        <td>2013-1-2</td>
                    </tr>
                    <tr>
                        <td>U盘</td>
                        <td>金士顿</td>
                        <td>120</td>
                        <td>2013-8-10</td>
                    </tr>
                    <tr>
                        <td>U盘</td>
                        <td>爱国者</td>
                        <td>133</td>
                        <td>2013-3-25</td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>
    

    3.7、caption 标签(为表格添加标题)

    table 标签的 summary 属性可以为表格添加摘要,但内容不会在浏览器中显示,其作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

    <!--summary 属性语法-->
    <table summary='表格简介文本'>......</table>
    
    <!--caption 标签为表格添加标题语法-->
    <table>
        <caption>标题文本</caption>
        <tr>
            <td>...</td>
            <td>...</td>
            ...
        </tr>
    </table>
    

    4、认识标签(第三部分)

    4.1、a 标签(超链接)

    4.1.1、title 属性

    a 标签可以实现超链接,网页中只要有链接的地方就有这个标签。

    语法:

    <a href='目标网址' title='鼠标滑过显示的文本'>链接显示的文本</a>
    <a href='value'>
    
    • title 属性:鼠标滑过链接文本时显示这个属性的文本内容,在实际网页开发中有很大作用,方便搜索引擎了解链接地址的内容(语义化更友好)
    • 加了 a 标签的文本会变成蓝色,被点击过颜色变成紫色,可以使用 css 样式设置
    • 默认在当前窗口打开超链接,要想在新建窗口打开需要添加 target 属性

    属性值(value):

    属性值超链接的 URL,可能的值:

    • 绝对 URL:指向另一个站点(如:href = 'http://www.baidu.com'
    • 相对 URL:指向站点内的某个文件(如:href = 'javascript:fun();' 指向站点内的某个函数)
    • 锚 URL:指向页面内的锚(如:href = '# top',可与 name 属性一起使用)

    实例:

    <!--a 标签示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=uft-8'>
            <title>a 标签的使用</title>
        </head>
        <body>
            <ul>
                <li> <a href='http://www.imooc.com' title='点击进入慕课网'>慕课网</a> </li>
                <li> <a href='http://www.baidu.com' title='点击进入百度网'>百度一下你就知道</a> </li>
                
            </ul>
        </body>
    </html>
    

    4.1.2、target 属性(打开新建窗口)

    a 标签的 target 属性可以打开在新建浏览器窗口打开超链接。

    <a href='目标网址' title='鼠标滑过显示的文本' target='_blank'>显示文本</a>
    

    4.1.3、mailto 属性(链接 Email 地址)

    a 标签的另一个属性 mailto 可以链接 Email 地址,让访问者便捷向网站管理者发送电子邮件。

    功能 关键字 功能详解 举例
    邮箱地址 mailto: 浏览器会自动调用默认的客户端电子邮件程序,并在收件人框中自动填上收件人地址 <a href='mailto:yy@imooc.com'>发送</a>
    抄送地址 cc= 在收件人地址后用 cc 地址,可以填写抄送地址 <a href='mailto:yy@imooc.com? cc=xx@xxx.com'>发送</a>
    密件抄送地址 bcc= 在收件人地址和用 bcc 地址,可以填上密件抄送地址 <a href='mailto:yy@imooc.com? bcc=xx@xxx.com'>发送</a>
    多个收件人、抄送。密件抄送人 ; 用分号隔开多个收件人的地址,可以实现发送多人的功能 <a href='mailto:yy@imooc.com;xx@xxx.com'>发送</a>
    邮件主题 subject= 用 subject 添加邮件主题 <a href='mailto:yy@imooc.com?subject=发送电子邮件'>发送</a>
    邮件内容 body= 用 body 添加邮件内容 <a href='mailto:yy@imooc.com?body=发送电子邮件'>发送</a>

    注意:如果 mailto 后面同时有多个参数的话,第一个参数必须以 “?” 开头,后面的参数每一个都以 “&” 分隔。

    <a href='mailto:yy@yyy ? cc=xx@xxx.com' & bcc=xx@xxx.com & subject=主题 & body=邮件内容'>发送</a>
    
    <!--mailto 属性-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=uft-8'>
            <title>a 标签的使用</title>
        </head>
        <body>
            <p>1922年的春天,一个想要成名的年轻人拉斐尔...</p>
            有什么建议可以给我发邮件
            <a href='maitlo:yy@imooc.com ? cc=xx@xxx.com & bcc=xx@xxx.com & subject=主题 & body=邮件内容'>发送</a>
        </body>
    </html>
    

    4.1.4、name 属性

    name 属性规定锚(anchor)的名称,可以使用 name 属性创建 html 页面中的书签

    书签不会以任何形式显示,对读者不可见;当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

    语法:

    <a name='lable'>锚(显示在页面上的文本)</a>
    

    实例:

    使用锚,定位到 Chapter 4,当点击 查看 Chapter 4 时,自动跳转到当前页面上 Chapter 4

    <!DOCTYPE HTML>
    <html>
        <body>
            <p>
                <a href="#C4">查看 Chapter 4</a> <br />
            </p>
            
            
            <h2>Chapter 1</h2>
            <p>This chapter explains ba bla bla</p>
    
            <h2>Chapter 2</a></h2>
            <p>This chapter explains ba bla bla</p>
    
            <h2>Chapter 3</h2>
            <p>This chapter explains ba bla bla</p>
    
            <h2><a name="C4">Chapter 4</a></h2>        <!--锚名需要和 href 的名称相同-->
            <p>This chapter explains ba bla bla</p>
        </body>
    </html>
    

    4.2、img 标签(图片)

    img 标签可以给网页插入图片。

    <img src='图片地址' alt='下载失败时的替换文本' title='提示文本'>
    
    • src:标识图片位置
    • alt:指定图片的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本。
    • title:提供对图片的描述(鼠标滑过时显示的文本)
    • 支持 gif、png、jpeg 格式图像文件

    实例 1:

    制作图像链接

    <!--将图片放 a 标签内-->
    <body >
      
      <a href="http://www.iqiyi.com/u/1183973888/follow" target='_blank'>
          <img src='http://fb.topitme.com/b/06/64/11317394700b16406bo.jpg' width ='30%' height ='20%' alt='杰克' title="点击查看原网页">
      </a>
    </body>
    

    实例 2:

    背景图片

    <html>
    
        <body background="/i/eg_background.jpg">
    
            <h3>图像背景</h3>
    
            <p>gif 和 jpg 文件均可用作 HTML 背景。</p>
    
            <p>如果图像小于页面,图像会进行重复。</p>
    
        </body>
    </html>
    

    实例 3:

    如何在文字中排列图片

    align = 'left/right'      <!--图像浮动到左边或右边-->
    
    <!--bottom 为默认对齐方式-->
    <html>   
        <body>
            <h2>未设置对齐方式的图像:</h2>
            <p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
            <h2>已设置对齐方式的图像:</h2>
            <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>   
            <p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
            <p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
            <p>请注意,bottom 对齐方式是默认的对齐方式。</p>
        </body>
    </html>
    

    图片自定义大小:

    可以自定义图片 width、height,也可以设置百分比(随窗口变化而变化)

    <img src='xxx.jpg' width='100px' hright='100px'>
    <img src='xxx.jpg' width='100%' hright='100%'>   <!--与窗口一样大-->
    

    5、form 标签(表单)

    5.1、使用表单标签与用户交互

    使用 form 标签网站可以与用户进行交互。表单是把用户输入的数据传送到服务器端,这样服务器就能处理表单传过来的数据。

    <form method='传送方式' action='服务器文件'
    
    • <form> 标签:成对出现,<form> 开始,</form> 结束
    • action:用户输入的数据被传送到的地方,如一个 PHP 页面(save.php)
    • method:数据传送的方式(get / post)
    • 所有表单控件(文本框 text、文本域(textarea)、按钮(button)、单选框、复选框等)都必须放在 <form> </form> 标签中,否则无法提交到服务器上
    <!--form 标签示例-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
            <title>form 表单标签的使用</title>
        </head>
        <body>
        <form method='post' action='save.php'>
            <lable for='username'>用户名:</label>
            <input type='text' name='username' id='username' value='' /> <br />
            <label for='pass'>密码:</label>
            <input type='password' name='pass' id='pass' value='' />
            
            <input type='submit' value='确定' name='submit' />
            <input type='reset' value='重置' name='reset' />
            <input type='radio' value='单选' name='radio' />
        </form>
        </body>
    </html>
            
    

    5.2、文本、密码输入框

    当用户要在表单中键入字幕、数字等内容时,就会用到文本输入框,文本框也可以转化为密码输入框。

    <form>
        <input type='text/password' name='名称' value='文本' />
    </form>
    
    • type:当 type='text'('password')时,输入框为文本(密码)输入框
    • name:为文本框命名,以备后台程序 ASP、PHP 使用
    • value:为文本输入框设置默认值(一般起到提示作用)
    <form>
      姓名:
      <input type="text" name="myName">
      <br/>
      密码:
      <input type="password" name="pass">
    </form>
    

    5.3、文本域,支持多行文本输入

    当需要在表单中输入大段文字时,就要用到文本输入域。

    <textarea rows='行数' cols='列数'>文本</textarea>
    
    • <textarea> 标签成对出现
    • cols:多行输入域的列数
    • rows:多行输入域的行数
    • 在 <textarea> </textarea> 标签间可以输入默认值
    • cols、rows 两个属性可以使用 css 样式的 width 和 height 代替
    <!--textarea 标签的使用-->
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>文本域</title>
    </head>
    <body>
    <form action="save.php" method="post" >
        <label>个人简介:</label>
        <textarea cols='50' rows='10'>在这里输入内容...</textarea>
        <input type="submit" value="确定"  name="submit" />
        <input type="reset" value="重置"  name="reset" />
    </form> 
    </body>
    </html>
    

    5.4、单选框、复选框

    在使用表单调查表时,未来减少用户的操作,使用选择框是一个好的主意,html 中有单选和复选两种选择。

    <input type='radio/checkbox' value='值' name='名称' checked='checked' />
    
    • type 是 radio 时为单选框,checkbox 为复选框
    • value:提交数据到服务器的值(后台程序 PHP 使用)
    • name:为控件命名,以备后台程序 ASP、PHP 使用
    • checked:当设置 checked='checked' 时,该选项被默认选中
    • 单选时,name 必须相同,复选时不同
    <!--单选-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
            <title>form表单标签的使用</title>
        </head>
        <body>
        <form method='post' action='save.php'>
            你是否喜欢旅游? <br />
            <input type='radio' name='radiolove' value='喜欢' checked='checked'> 喜欢
            <input type='radio' name='radiolove' value='不喜欢'> 不喜欢
            <input type='radio' name='radiolove' value='无所谓'> 无所谓
        </form>
        </body>
    </html>
    
    <!--label 标签-->
    <form action="save.php" method="post" >
        <label>性别:</label>
        <label>男</label>
        <input type="radio" value="1"  name="gender-man" />
        <label>女</label>
        <input type="radio" value="2"  name="gender-man" />
    </form>
    

    5.5、下拉列表框

    下拉列表框可以有效节约网页空间,也可以单选和多选。

    <!--selected='selected' 时,该选项默认被选中-->
    <option value='提交值'(向服务器提交的值)>选项(显示的值)</option>
    
    <!--option 标签-->
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>下拉列表框</title>
    </head>
    <body>
    <form action="save.php" method="post" >
        <label>爱好:</label>
        <select>
          <option value="看书">看书</option>
          <option value="旅游" selected='selected'>旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
        </select>
    </form>
    </body>
    </html>
    

    5.6、使用下拉列表进行多选

    下拉列表也可以多选操作,在 <select> 标签中设置 multiple='multiple' 属性,即可实现。(win 系统多选时,按下 ctrl + 鼠标单击,mac 下 command + 单击)

    <select multiple='multiple'>...</select>
    

    5.7、提交按钮,提交数据

    表单中有两种按钮,提交、重置。

    <input type='submit' value='提交'>
    
    • type 为 submit 时,按钮才有提交作用
    • value:按钮上显示的文字
    <!--submit 提交-->
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>提交按钮</title>
    </head>
    <body>
    <form  method="post" action="save.php">
        <label for="myName">姓名:</label>
        <input type="text" value=" " name="myName " />
        <input type="submit" value="提交" name="submitBtn" />
    </form>
    </body>
    </html>
    

    5.8、重置按钮,重置表单信息

    当 type 为 reset 时可以将表单中所填写的信息重置。

    <input type='reset' value='重置'>
    
    • type 为 reset 时,按钮才有作用
    • value:按钮上显示的文字

    5.9、form 表单中的 label 标签

    label 标签没有任何特殊效果,其作用是为鼠标用户改进了可用性。当用户单击选中该 label 标签时,浏览器会自动将焦点转到和标签相关的表单控件上(就自动选中和该 label 标签相关联的表单控件上)。

    <label for='控件 id 名称'></label>
    
    • 标签的 for 属性中的值应当与相关控件的 id 属性值相同
    • label 标签相当于选中或者聚焦的作用(提交、重置和下拉可以不用)
    <!--label 标签-->
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>form中的lable标签</title>
        </head>
    
        <body>
        <form>
            <label for="male">男</label>  <!--for 属性的值与 id 的值必须相同才能将焦点转到相关的控件上来-->
            <input type="radio" name="gender" id="male" />
            <br />
            <label for="female">女</label>
            <input type="radio" name="gender" id="female" />
            <br />
            <label for="email">输入你的邮箱地址</label>
            <input type="email" id="email" placeholder="Enter email">
        </form>
        </body>
    </html>
    

    相关文章

      网友评论

          本文标题:HTML 基础(一)

          本文链接:https://www.haomeiwen.com/subject/wmygohtx.html