html总结8大标签

最新推荐文章于 2024-08-23 20:21:54 发布

原创最新推荐文章于 2024-08-23 20:21:54 发布 · 753 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #标签 #语言

javaweb 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了HTML的基础知识，包括标签、属性、排版等，并讲解了如何使用HTML创建段落、列表、表格等内容。

HTML
HTML： HyperText Markup Language 超文本标记语言。
HTML是最基础的网页语言。
HTML的代码都是由标签所组成。
HTML的基本格式
HTML的真正的标签
* 排版的标签

            *<!-- -->       HTML的注释
            * <br />        换行标签
            * <hr />        一条水平线

   * 排版标签

     * <br />   换行
        * <hr />    一条水平线
            * color:    颜色
                * 值的写法：两种   
                    1）直接写英文的单词（red green blue）  
                    2）RGB三原色(red green blue)    #ab1255
            * width：    宽度
                * 值两种写法：      
                    1）  200px;  
                    2）  可以写百分比
                        区别：百分比跟着浏览器的大小而改变，像素值不会。
        * <p></p>   段落标签
            * 段落标签的开始和结束位置留一空行。
            * align：对齐方式
            * &nbsp;    代表空格
        * 在浏览器声明一块区域，区域中放入其他（文字，子标签）
        * <div></div>       +CSS+DIV在网页进行布局（美工）
        * <span></span>     
            * div块级元素（换行的符号）    
            * span标签不会换行    行内元素

    * 字体标签
        * <font>字体的内容</font>

        * 字体标签：
        * <font></font>
        * color:    颜色
        * size：     字体的大小
            * 最大值和最小值
                * 最小值是：1
                * 最大值是：7
            * 默认值：  3
                * 值的写法  +2  （3+2）
        * face：     字体的类型

        * 标题标签
            * <h1></h1>
                ...
              <h6></h6> 
            * 特点：逐渐缩小   


        * 粗体
            * <b></b>
        * 斜体    
            * <i></i>

            * 标签可以嵌套的
                <b><i>文本的内容</i></b>

        * 特殊字符
            * <     &lt;
            * >     &gt;
            * &     &amp;


        * 滚动的字幕（忘了吧）

* 列表标签（*****）
            * 数据格式化列表

                <dl>
                    <dt>上层项目</dt>
                    <dd>下层项目</dd>
                    <dd>下层项目</dd>
                        * 自动对齐，缩进的
                </dl>
            * 有序列表和无序列表     有序的ordered
                * 有序
                    <ol>    
                        <li>数据的条目</li>
                        <li>数据的条目</li>
                        <li>数据的条目</li>
                    </ol>
                    * ol的属性
                        * type="a"
                        * start="" 从哪开始 
                * 无序（用的最多）
                    <ul>
                        <li>数据条目</li>
                        <li>数据条目</li>
                        <li>数据条目</li>
                    </ul>   
                    * ul的属性
                        * type=""

* 图片标签（*****）
            <img />
            * 属性：
                * src="图片的地址"
                * width="图片的显示宽度"
                * height:图片显示的高度
                * alt：图片的说明文字

* 超链接标签（*****）
            * 写法：<a></a>

            * 链接资源
                * 必须要指定属性：href="链接的地址"
                * 需要编写协议
                    * HTTP
                * 默认file文件的协议
                    * 如果浏览器可以解析文件，默认会打开文件。
                    * 如果浏览器不可以解析文件，弹出下载窗口。
                * 支持自定义协议
                    * 浏览器解析不了的协议，默认找操作系统的引用程序。

            * 定位资源
                * name  定义锚点
                * 点击    href="#锚点名称"

* 表格标签（*****）
            * 把数据封装成表格。
            * 表格标签
            <table>
                <caption>用户列表</caption>
                <tr>
                    <th>数据</th>
                    <th>数据</th>
                </tr>
                <tr>
                    <td>数据</td>
                    <td>数据</td>
                </tr>
            </table>

            table的属性
                * border:   边框
                * width:    宽度
                * height:   高度

            tr的属性
                * align:中间的文字的对齐方式  

            td获取th
                区别：  th中间的内容粗体显示。
                    th中间的内容默认居中。
                    th一般用来表格的表头

                td的属性
                    * width     宽度
                    * height    高度
                    * 合并单元格（值的写法：合并几个单元格，值就写几）
                        * 行合并   rowspan=""
                        * 列合并   colspan=""
                        column 列
            * <caption></caption>必须要写在table的中间

* 表单标签（**********）
            * 收集用户输入的数据

            * 表单的标签
            <form >
                * form的属性
                    * action="表单的提交路径"
                        * http://www.baidu.com
                        * html页面
                    * method="提交方式（默认是get方式）"（面试题）
                        * form表单的提交方式有哪些？（get和post的区别）
                            * 答：form表单提交方式有很多，常用的有两种post和get
                                * post和get提交方式的区别：
                                    * get方式会把参数列表显示在地址栏上，post方式不会（请求体）。
                                    * get方式说明网站安全级别较低，post安全级别较高。
                                    * get方式不支持大数据，post支持大数据。

                            * 推荐大家使用post方式。

                * 用户输入的内容
                <input type="类型" name="名称(必须要指定)" value="是否指定value属性" />
                    * name属性必须要指定，value可以看情况指定

                * type="text"           普通的文本框
                    * name必须指定

                * type="password"       密码框
                    * * name必须指定

                * type="radio"          单选按钮
                    * name必须指定  value必须指定
                    * name的属性，值要相同
                    * 默认值：checked=checked或者true

                * type="checkbox"       多选按钮
                    * name必须指定  value必须指定
                    * 默认值：checked=checked或者true

                * type="reset"          重置：恢复到最初的状态 
                * type="submit"         提交表单
                    * 点击提交后，地址栏发生了变化（?sex=on）
                    * 在普通的文本框上添加name属性 name="username"之后，点击提交，地址栏发生了变化（?username=haha&sex=on）
                        String str = "?username=haha&sex=on";
                    * ?username=zhangsan&password=123&sex=nan&love=zq   

                * type="file"           选择文件        
                    * name属性指定
                * type="hidden"         隐藏组件 
                    * name指定 value指定    

                * type="button"         按钮
                    * value="显示的文字"
                    * 和js（javascript）   绑定事件

                * type="image"          图片
                    * 提交    引入外部的一个文件（图片）

                * 声明选择框 
                    <select name="city">
                        <option value="bj"></option>
                        <option value="sh"></option>
                    </select>   

                * <textarea>文本域 
                    * rows="行"
                    * clos="列"  
                    * name属性指定
                    * selected="selected"   代表默认值
            </form>

    * 框架标签（了解）
            * 对网页进行布局

            <frameset rows="150,*">
                <frame >    代表上半部分
                <frame >    代表下半部分
            </frameset>

            * 前提条件：不能写在<body>标签的内部和下面

<html>
            <head>
                存放属性的信息，辅助性的信息
                引入外部的文件（重要）
                会先加载
            </head>
            <body>
                存放的是真正的数据
            </body>
        </html>

frame.html

<html>
<frameset rows="20%,60%,20%">
  <frame src="tou.html" />
    <frameset cols="25%,75%">
        <frame src="centeleft.html" bordercolor="red"/>
        <frame src="centerRigth.html" name="X1"/>
    </frameset>
  <frame src="xia.html"/>
</frameset>

tou.html

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body bgcolor="aqua">
            <p  align="center">Hello world!</p>
    </body>
</html>

xia.html

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <p align="center"> 
                下
        </p>
    </body>
</html>

centeleft.html

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body bgcolor="brown">
        <ol>
            <li>
                <a href="http://www.jb51.net/html5/147671.html" target="X1">第一个</a>
            </li>   
            <li>
                 <a href="http://www.jb51.net/html5/147671.html" target="X1">第二个</a>
            </li>
            <li>
                 <a href="XX.html" target="X1">第三个</a>
            </li>
            <li>
                 <a href="register.html" target="X1">注册</a>
            </li>
        </ol>
        <!--target name-->
    </body>
</html>

centerRigth.html

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body bgcolor="aqua">
            <p  align="center">Hello world!</p>
    </body>
</html>