HTML总结笔记-很全

    HTML

    1. HTML概述    2

    1.1 HTML是什么    2

    1.2 HTML 语言特点    2

    2. HTML 常用标签    3

    2.1 结构概述    3

    2.2 标题标签<Hn>    4

    2.3 字体标签<font>    4

    2.4 行标签<p> <br/>    5

    2.5 图片标签<img>    5

    2.5 文字布局 & 列表标签<hr><ol><ul><li><pre>    6

    2.6 格式化标签:<b><i>    7

    2.7 超链接标签<a>    7

    2.8 滚动标签的语法    8

    3. 表格<table> && 表单FROM    8

    3.1 表格<table>标签    8

    3.2 表单的基本结构    10

    3.3 表单的元素输入域标签 <input>    10

    3.4 表单的下拉列表元素标签 <select>    12

    3.5 表单的多行文本框元素标签 <textarea>    13

    4. HTML框架标签    13

    4.1 框架标签 <frameset>    13

    4.2 框架子标签 <frame>    14

    5. html 示例文件    14

    1. HTML概述

    1.1 HTML是什么

    HTML:超级文本标记语言(Hyper Text Markup Language)

    超文本’就是指页面内可以包含图片、链接等非文字内容.

    “标记’就是使用标签的方法将需要的内容包括起来。例如:<a>www.itcast.cn</a>

    HTML是由标签所组成的语言,就是能够通过标签标记展示超文本效果

    本文由Chaipip站长完成,版权所有禁止抄袭,如需转载,请发邮件s39514@163.com获得同意

    1.2 HTML 语言特点

    HTML源码不需要编译,直接使用浏览器解析执行。

    HTML文件的扩展名是*.html或*.htm(过去命名规范)

    HTML结构都是由标签组成

    标签名预先定义好的,我们只箭要了解其功能即可。

    标签名不区分大小写。建议使用小写

    通常情况下标签由开始标签和结束标签组成。例如:<a></a>

    内容体:开始标签和结束标签之间的内容

    如果没有结束标签,建议以/结尾。空标签。没有内容体。例如:<img/>

    HTML结构包括两部分:头head和体body

    Head中存储的都是网页的说明性信息

    Body中存储的都是要展示给用户看的信息

    <html></html> 相当于java类的类大括号

    2. HTML 常用标签

    2.1 结构概述

    <!DOCTYPE html>                     <!– 文档说明 –>

    <html>                              <!– 包含页面所有内容 –>

        <head>                          <!– 页面标题,页面信息展示,连接外部文件–>

            <meta
    charset=“UTF-8”
    >

            <title>我就想写个标题</title>

            <link
    rel=“stylesheet”
    href=“css/style.css”
    >

        </head>

        <body>                          <!– 页面显示的所有内容 –>

            <p
    class=“txt-center”>center</p>

            <a
    href=“http://www.taobao.com”
    class=“link”
    target=“_blank”>
    去淘宝(target=”_blank”在新页面打开)</a>

            <form
    action=“aaa.php”
    method=“post”>

                <!– <br>—换行符 –>

                文本:
    <input
    type=“text”
    placeholder=
    请输入用户名…”
    >
    <br>

                英语:
    <input
    type=“checkbox”
    name=“study”
    >
    <br>

                <select>

                    <option>北京</option>

                    <option
    selected>
    深圳</option>

                </select>
    <br>

                <textarea>文本域</textarea>
    <br>

                <input
    type=“submit”
    >

                <input
    type=“button”
    value=“button”
    >

                <button
    type=“button”>
    我要提交</button>

            </form>

            <table
    border=“1”
    cellpadding=“0”
    cellspacing=“0”>

                <caption>学生信息</caption>

                <thead>

                    <tr>

                        <th>姓名</th>

                        <th>年龄</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                     </tr>

                </tbody>

                <tfoot>

                </tfoot>

            </table>

            <ul
    class=“list clear”>         <!–
    无序列表 –>

                <li><a
    href=“”>
    列表四</a></li>

            </ul>

            <ol>            <!– 有序列表 –>

                <li>列表一</li>

                <li>列表二</li>

            </ol>

            <h1>标题</h1>

            <h2>标题</h2>

            <h6>标题</h6>

            <div
    class=“box”>
    盒子标签</div>

        </body>

    </html>

    2.2 标题标签<Hn>

    标题标签<Hn></Hn> n取1~6(设置文字标题)

    <hl>定义最大的标题。<h6>定义最小的标题。

    1)<H1>一级标题</H1>

    2)<H2>二级标题</H2>

    3)<H3>三级标题</H3>

    4)<H4>四级标题</H4>

    5)<H5>五级标题</H5>

    6)<H6>六级标题</H6>

    2.3 字体标签<font>

    <font>用于设置字体尺寸、字体颜色等。

    <font size=”字体大小”  color=”字体颜色”  face=”字体类型”>要设置的文字</font>

    size属性:设置字体的大小。可能的值:从1到7的数字。浏览器默认值是3。

    color属性:设置字体的颜色

    颜色的取值:#xxxxxx 或colorname

    #xxxxxx表示使用红绿蓝三原色设置颜色。

    红绿蓝分别取值:00–FF,此处使用16进制。(FF就是十进制的255)

    #000000表示黑色,#FFFFFF白色

    #FF0000红色,#00FF00绿色,#0000FF蓝色

    colorname使用英文单词确定颜色。red红色,blue蓝色,green绿色

    <!– 字体标签 –>

    <font
    size=“7”>
    我个大</font>

    <font
    color=“#FF0000”>
    我很红</font>

    <font
    color=“blue”>
    我是蓝色的</font>

    2.4 行标签<p> <br/>

    常有的行标签

    1. 段落标签<p></p>

    定义段落。p标签会自动在其前后创建一些空白。

    <p align=”left” (左对齐)/ “right” (右对齐)/ “center” (居中)>(段落的对其方式)   

    2. 换行标签<br/>

    插入单个换行。

    <p
    class=“txt-center”>center</p>
    <p
    align=“left”>left</p>
    <br/>

    2.5 图片标签<img>

    <img>在html页面中引用一张图片

    配置:

    src:指定需要显示图片的URL(路径)。

    alt:图片无法显示时的替代文本。

    title:鼠标移动上显示的文字

    width:设置图像的宽度。

    height:定义图像的高度。

    <img  src=“图片地址”
    width=“图片宽度”
    height=“图片高度”  alt=“图片的提示文字” 
    align=“top/bottom/middle/left/right”  border=“图片的边框宽度”>(align是用于调整图片相对于周围文本的对其方式)

    2.5 文字布局 & 列表标签<hr><ol><ul><li><pre>

    1. 水平线<hr>

    标签在HTML页面中创建一条水平分隔线,用千定义内容中的主题变化。

    <hr  size=“厚度”  width=“宽度”  color=“颜色”>

    size属性:水平线的粗细,单位像素

    width属性:水平线的宽度,单位像素

    2. 有序列表

    序号类型:1、a、A、i、I

    <ol  type=“1”>              <!– 序号类型有:1、a、A、ⅰ、I –>

        <li>填写信息</li>       <!– 必须用<li></li>将内容包括起来 –>

        <li>填写信息</li>

        <li>填写信息</li>

        ……

    </ol>

    3. 无序列表

    type符号取值:disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形)

    <ul  type=“序号类型”>       <!– 序号类型有:disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形)–>

        <li>所写内容<li>        <!– 必须用<li></li>将内容包括起来–>

        <li><a
    href=“”>
    列表四</a></li>

    </ul>

    4. 预格式文本语法

    <pre>

    (具体的文本格式,这个格式在时是不改变的哦!)

    </pre>

    2.6 格式化标签:<b><i>

    <b>粗体

    <i>斜体

    2.7 超链接标签<a>

    <a
    href=
    链接地址
    class=“link”
    target=“_blank”
    >
    连接标志
    </a>

     <a>标签是超链接,是在html页面提供一种可以访问其他位置的实现方式。

    href:用于确定需要显示页面的路径(URL)

    target:确定以何种方式打开href所设置的页面。常用取值:_blank、_self等

    _blank在新窗口中打开href确定的页面。

    _self默认。使用href确定的页面替换当前页面。

    1. 链接到其他页面

    <a href=”链接地址”>连接标志 </a>

    2. 链接到本页面

    首先创建一个锚链接的锚记点:<a href=”#锚记点名称”>主题名称</a>

    然后在具体要链接到的地方设置name:<a name=”锚记点名称”></a>

    (锚记点前面要加上#号)

    3. 电子邮件链接

    <a href=”mailto:邮件地址”>站长邮箱 </a>(注意不能忘了mailto)

    2.8 滚动标签的语法

    <marquee  scrolldelay=滚动延迟时间  direction=up/down/left/right(滚动方向)  onmouseover=”this.stop()”(当鼠标指在上面时停止滚动)  onmouseout=”this.start()”(当鼠标离开时继续滚动) >

    滚动的文字和图像

    </marquee>

    3. 表格<table> && 表单FROM

    3.1 表格<table>标签

    HTML表格由<table>标签以及一个或多个<tr>、<th>或<td>标签组成。

    <table>是父标签,相当于整个表格的容器。

    border表格边框的宽度。

    width表格的宽度。

    align表格对其方式,取值:left左、right右、center居中。

    eel/padding学元边沿与其内容之闾的空白。【-殷设置为0助可】

    eel/spacing学元格之闾的空白。【-殷设置为0助可J

    <tr>标签用来定义行

    <td>标签用来定义表格的单元格(一个列)

    colspan单元格可横跨的列数。

    rowspan单元格可横跨的行数。

    align单元格内容的水平对齐方式,取值:left左、right右、center居中。

    <th>标签用来定义表头。单元格内的内容默认居中、加粗。

        <table
    border=
    表格的边框的宽度(一般不超过5) width=表格的宽度
    height=
    表格的高度 bordercolor=表格边框线的颜色
    bgcolor=
    整个表格的背景颜色background=表格的背景图片地址(背景图片)
            align=表格对齐方式>
            <tr
    bgcolor=
    行的背景颜色>()

                <td
    colspan=
    跨的列数
    rowspan=
    跨的行数
    bgcolor=
    本单元格的背景颜色
    background=
    本单元格的背景图片地址(背景图片) align=单元格中的内容对齐方式(right/left/center/)></td>(单元格)

            </tr>

        </table>

    <table
    border=“1”
    cellpadding=“0”
    cellspacing=“0”>
                <caption>学生信息</caption>            <thead>

                    <tr>

                        <th>姓名</th>

                        <th>年龄</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>张三</td>

                        <td>18</td>

                    </tr>

                </tbody>

                <tfoot>

                    <tr>

                        <td
    colspan=“4”>
    备注:</td>

                    </tr>

                    <tr>

                        <td>11</td>

                        <td
    rowspan=‘2’></td>

                    </tr>

                </tfoot>

            </table>   

    3.2 表单的基本结构

    <form>表单标签,在html页面创建一个表单,表单标签在浏览器上没有任何显示。如果数据需要提交到服务器,负责搜集数据的标签必须存放在表单标签体内容。

    action属性:请求路径,确定表单提交到服务器的地址(路径)

    method属性:请求方式。常用的取值:GET、POST

    GET:默认值

    提交的数据追加在请求路径上。例如:/1.html?username=jack&password=1234,数据格式k/v,追加是使用?连接,之后每一对数据使用&连接

    因为请求路径长度有限,所有GET请求提交的数据有限。

    POST:

    提交的数据不再请求路径上追加(及不显示在地址栏上)

    提交的数据大小不显示

            <form
    action=“aaa.php”
    method=“post”>
                <!– <br>—换行符 –>            文本:
    <input
    type=“text”
    placeholder=
    请输入用户名…”
    >
    <br>

                英语:
    <input
    type=“checkbox”
    name=“study”
    >
    <br>

                <select>

                    <option>北京</option>

                    <option
    selected>
    深圳</option>

                </select>
    <br>

                <textarea>文本域</textarea>
    <br>

                <input
    type=“submit”
    >

                <input
    type=“button”
    value=“button”
    >

                <button
    type=“button”>
    我要提交</button>

            </form>

    3.3 表单的元素输入域标签 <input>

    <input>标签用千获得用户输入信息,type属性值不同,搜集方式不同。最常用的标签。

    <input  name=”” type=password  size=文本框的大小  maxlenght=限制输入的最大字符>

    type属性

    text:文本框,单行的输入字段,用户可在其中输入文本。

    password:密码框,密码字段。该字段中的字符以黑圆显示。

    radio:单选框,表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。

    submit:提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性,否则将”提交”两个字提交到服务器。

    因为不同项目注册需要的字段不同,需要完成的案例中没有覆盖所有的表单元素,以下标签使用也需要大家掌握。

    checkbox:复选框

    file:文件上传组件,提供”浏览”下按可以选择需要上传文件.

    hidden:隐藏字段数据会发送给服务器,但浏览器不进行显示。

    reset:重詈按钮。将表单恢复到默认值。

    button:普通按钮,常用用于JavaScript结合使用。

    button标签默认有个submit

    name:元素名

    如果需要表单数据提交到服务器,必须提供name属性值,服务器通过属性值获得提交的数据。

    Name参数名

    value属性:设置input标签的默认值。submit和reset为按钮显示数据

    value参数值

    size:大小

    checked属性:单选框或复选框被选中。

    readonly:是否只读

    disabled:是否可用

    <input  name=”” type=text  size=文本框的大小  maxlenght=限制输入的最大字符>(单行文本框)

    <input  name=”” type=password  size=文本框的大小  maxlenght=限制输入的最大字符>(单行文本框——设置密码)

    <input  name=”name” type=radio  value=”男”  checked(默认选定)>(单选按钮——男)(设置单选按钮的时候名字一定要一样)

    <input  name=”name” type=radio  value=”女”>(单选按钮——女)

    <input  name=”” type=submit  value=提交>(按钮——提交)

    <input  name=”” type=reset  value=重置>(按钮——重置)

    <input  name=”” type=checkbox  value=play(必须有)  checked>玩游戏(复选框)

    3.4 表单的下拉列表元素标签 <select>

    <select>下拉列表。可以进行单选或多选。需要使用子标签<option>指定列表项

    name属性:发送给服务器的名称

    multiple属性:不写默认单选,取值为”multiple”表示多选。

    <option>子标签:下拉列表中的一个选项(一个条目)。

    selected:勾选当前列表项

    value:发送给服务器的选项值。

    语法

    <select  name=””>

    <option  value=””(必须有)>内容</option>

    <option  value=””(必须有)>内容</option>

    <option  value=””(必须有)>内容</option>

    <option  value=””(必须有)>内容</option>

    ……

    </select>

    3.5 表单的多行文本框元素标签 <textarea>

    <textarea>文本域。多行的文本输入控件。

    注意:文本域的参数值就是内容体

    name属性:参数名

    rows属性:文本域的行数

    cols属性:文本域的列数

    语法

    <textarea  name=”” cols=”宽度” rows=”高度”(不要和合并单元格的rowspan和colspan相混淆)>

    具体的内容

    </textarea>

    4. HTML框架标签

    4.1 框架标签 <frameset>

    <frameset>标签,是多个窗口页面整合在一起的一个集合(框架集)。每一个页面(框架)都是单独文档,需要使用子标签<frame>来确定页面的位置。<frameset>通过列和行来确定整体布局,使用cols确定列数,使用rows确定行数。多个<frameset>可以嵌套使用。

    <frameset>和<body>两个不能共存。

    rows属性和cols属性取值:值1,值2,值3…. 一个值表示一行(列),多值使用逗号分隔,值可以是10px、10%等,最后一个值如果不想计算可以使用*匹配剩余量。

    4.2 框架子标签 <frame>

    <frame>标签,用于设置<frameset>框架集中的一个页面(框架)。

    src属性:确定页面的路径

    noresize属性:框架分隔先不能移动取值:true不可以移动

    name属性:框架页面的名字

    5. html 示例文件

    <!DOCTYPE html>                     <!– 文档说明 –>

    <html>                              <!– 包含页面所有内容 –>

        <head>                          <!– 页面标题,页面信息展示,连接外部文件–>

            <meta
    charset=“UTF-8”
    >

            <title>我就想写个标题</title>

            <link
    rel=“stylesheet”
    href=“css/style.css”
    >

        </head>

        <body>                          <!– 页面显示的所有内容 –>

            <img
    src=“images/300 (1).jpg”
    class=“pic”
    id=“pic”
    title=
    张杰
    alt=
    刚做爸爸的明星
    >

            <img
    src=“images/300 (1).jpg”
    class=“pic”
    title=
    张杰
    alt=
    刚做爸爸的明星
    >

            <img
    src=“images/300 (1).jpg”
    id=“pic”
    title=
    张杰
    alt=
    刚做爸爸的明星
    >

            <img
    src=“images/300 (1).jpg”
    class=“pic”
    title=
    张杰
    alt=
    刚做爸爸的明星
    >

            <p
    class=“txt”>
    淘宝网是亚太地区较大的网络零售、商圈,由阿里巴巴集团在20035月创立。淘宝网是中国深受欢迎的网购零售平台,拥有近5亿的注册用户数,每天有超过6000万的固定访客,同时每天的在线商品数已经超过了8亿件,平均每分钟售出4.8万件商品。截</p>

            <p
    class=“txt-left”>left</p>

            <p
    class=“txt-center”>center</p>

            <p
    class=“txt-right”>right</p>

            <a
    href=“http://www.taobao.com”
    class=“link”
    target=“_blank”>
    去淘宝(target=”_blank”在新页面打开)</a>

            <form
    action=“aaa.php”
    method=“post”>

                <!– <br>—换行符 –>

                文本:
    <input
    type=“text”
    placeholder=
    请输入用户名…”
    >
    <br>

                文本:
    <input
    type=“text”
    value=
    请输入用户名…”
    >
    <br>

                密码:
    <input
    type=“password”
    >
    <br>

                男:
    <input
    type=“radio”
    name=“denger”
    checked
    >

                女:
    <input
    type=“radio”
    name=“denger”
    >
    <br>

                数学:
    <input
    type=“checkbox”
    name=“study”
    checked
    disabled
    >

                语文:
    <input
    type=“checkbox”
    name=“study”
    >

                英语:
    <input
    type=“checkbox”
    name=“study”
    >
    <br>

                <select>

                    <option>北京</option>

                    <option>上海</option>

                    <option
    selected>
    深圳</option>

                    <option>广州</option>

                </select>
    <br>

                <textarea>文本域</textarea>
    <br>

                <input
    type=“submit”
    >

                <input
    type=“button”
    value=“button”
    >

                <button
    type=“button”>
    我要提交</button>

            </form>

            <table
    border=“1”
    cellpadding=“0”
    cellspacing=“0”>

                <caption>学生信息</caption>

                <thead>

                    <tr>

                        <th>姓名</th>

                        <th>年龄</th>

                        <th>性别</th>

                        <th>手机号</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>张三</td>

                        <td>18</td>

                        <td></td>

                        <td>15554582428</td>

                    </tr>

                    <tr>

                        <td>李四</td>

                        <td>20</td>

                        <td></td>

                        <td>14726532541</td>

                    </tr>

                    <tr>

                        <td>张三</td>

                        <td>18</td>

                        <td></td>

                        <td>15554582428</td>

                    </tr>

                    <tr>

                        <td>李四</td>

                        <td>20</td>

                        <td></td>

                        <td>14726532541</td>

                    </tr>

                    <tr>

                        <td>张三</td>

                        <td>18</td>

                        <td></td>

                        <td>15554582428</td>

                    </tr>

                    <tr>

                        <td>李四</td>

                        <td>20</td>

                        <td></td>

                        <td>14726532541</td>

                    </tr>

                </tbody>

                <tfoot>

                    <tr>

                        <td
    colspan=“4”>
    备注:</td>

                    </tr>

                    <tr>

                        <td>11</td>

                        <td
    rowspan=‘2’></td>

                    </tr>

                    <tr>

                        <td>222</td>

                    </tr>

                </tfoot>

            </table>

            <ul
    class=“list clear”>         <!–
    无序列表 –>

                <li><a
    href=“”>
    列表一</a></li>

                <li><a
    href=“”>
    列表二</a></li>

                <li><a
    href=“”>
    列表三</a></li>

                <li><a
    href=“”>
    列表四</a></li>

            </ul>

            <ol>            <!– 有序列表 –>

                <li>列表一</li>

                <li>列表二</li>

                <li>列表三</li>

                <li>列表四</li>

            </ol>

            <h1>标题</h1>

            <h2>标题</h2>

            <h3>标题</h3>

            <h4>标题</h4>

            <h5>标题</h5>

            <h6>标题</h6>

            <div
    class=“box”>
    盒子标签</div>

        </body>

    </html>

     

    本文由Chaipip站长完成,版权所有禁止抄袭,如需转载,请发邮件s39514@163.com获得同意

    转载请注明:chaipip博客 » HTML总结笔记-很全

    喜欢 0
分类:前端, 网络

还没有人抢沙发呢~