HTML基础

来源：互联网发布：北京人口数据统计编辑：程序博客网时间：2024/06/17 15:35

什么是HTML？

HTML 是超文本标记语言 (Hyper Text Markup Language)
HTML 是一种标记语言 (markup language)
HTML 使用标记标签来描述网页
不是 HTML 标签。它为浏览器提供一项信息（声明

文件扩展名：*.html或*.htm    (1)html结构            <html>                <head>                    包括资讯信息：整个页面的属性、指导浏览器解析的标签、引入外部文件的标签                </head>                <body>                    我们需要展示的信息                </body>            </html>

HTML常用标签
1、

段落 <p></p>强制换行<br/>水平分割线<hr/>

2、文件标签：

<html><html>:根标签        <head>            <title></title>:页面的标题        </head>        <body></body>：内容                text:文本的颜色                bgcolor:背景色                background:背景图片

3、清单标签（也称为列表标签）

无序列表：<ul></ul>            <li></li>:列表项            属性：                type：有三个值，分别为disc、 square和circle            示例：            <ul >                <li>列表项</li>                <li>列表项</li>                <li>列表项</li>                            </ul>        有序列表：<ol></ol>            <li></li>:列表项            属性：                type：1、A、a、I、i（数字、字母、罗马数字）                start:数字，代表首项开始位置            示例：            <ol>                <li>列表项</li>                <li>列表项</li>                <li>列表项</li>                </ol>

    列表标签的作用：实现菜单项（可以实现横向或者纵向菜单）    无序列表标签怎么去掉小圆点？HTML中不能直接去掉，没有这个属性值，需要在CSS中给li标签添加样式list-style:none;

<body>    <ul type="circle">        <li>            <a href="https://www.baidu.com" title="百度" target="_blank">百度</a>        </li>        <li>            <a href="https://www.bing.com" title="必应" target="iframe">必应</a>        </li>    </ul>    <iframe name="iframe" width="400" height="300"></iframe></body>

4、链接标签

<a></a>href：设置链接的URL，相对路径或绝对路径target: 显示链接的窗口或框架_blank：在新窗口中打开链接_self：在当前窗口打开链接_parent：在父窗口中打开链接_top：在顶级窗口中打开链接framename：窗口名称name：链接名称，创建文档内的书签title：设置超链接的文字说明（鼠标悬停时显示）

5、表格标签

    `<table></table>:        属性：            border:表格边框            width:表格的宽度            align:表格的对齐方式（<tr align="center">单元格里面的内容居中对齐<tr>）            bgcolor:背景颜色    <tr></tr>: 代表行    <td></td>：代表单元格        属性：            colspan:列合并            rowspan:行合并    <th></th>：相等于<td>, 只是内置样式加粗居中    <caption></caption>：表格的标题，即表头    <thead></thread>:定义表格的页眉`

颜色的三种表示方式：
(1)单词：red green black
(2)rgb三原色：reg(0,0,0) 0-255
(3)#000000 #ffffff #325687 #377405

文件引用路径
相对路径
(1) 同一个目录的文件引用，即源文件和引用文件在同一个目录里，直接写引用文件名即可
(2) ../表示源文件所在目录的上一级目录
(3) ../../表示源文件所在目录的上上级目录，以此类推
(4)下级目录，直接写下级目录文件的路径即可
绝对路径

scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]   http://localhost:8080

6、

form标签：<form></form>        属性：             name:表单名称            action:提交的路径地址            method:提交方式（get和post）    form表单中action="#"      如果当前url接受,action可以不写或写action="#"或action="当前的url".如果是b接受，就写action=b了             get和post的区别（重点）：                (1)get提交将数据加在地址栏的后面，格式?name=value&name=value；post提交将数据封装在请求体中                    ?username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#                (2)get提交相对不安全；post提交相对安全                (3)get提交有大小限制，根据浏览器不同而不同；post不限制大小        示例：        <form>             <table>                <!--form里面嵌套table-->                        </table>                    </form>

7、

input标签：<input type=" "/>        type属性:根据type属性实现各种不同功能的表单项；            text：普通的文本输入框；                name：username value="张三"<!--张三是默认值-->            password：密码输入框；特点是显示的是掩码            radio：单选按钮                name：如果想让一组单选按钮互斥，就用指定同一name属性值，需要加value属性值；                checked：默认被选中；                          checkbox：复选框；                name：组的概念，需要加value属性值。                checked：默认被选中；            file：上传文件的控件            button：普通按钮，没有任何内置的功能；            submit：内置功能，点击会按照action地址提交            reset：重置，点击会清空之前填写的内容            image：图片按钮，功能类似与submit                src：加载图片                alt:图片的提示文字            hidden:隐藏表单，作用是在提交数据的时候，服务器需要这个数据，但是不需要用户看到。        注意：name属性必须要写。

8、

select标签(<select></select>)：下拉菜单        属性：            name;表单项的名称        option标签：可选项（下拉菜单之间的级联）            属性：                value，表单项的值                selected：默认被选中select标签本身无法设置下拉长度，可以使用其他css属性设置。但可以使用size属性设置可见选项的个数<select name="city">  <option value="0">济南市</option></select>

9、

textarea:文本域标签        属性：            cols：列数            rows：行数        注意：默认的文本值在标签体当中<textarea cols="20" rows="3" name="description">    多行文本框</textarea>

特殊字符

        &emsp 表示空格        &nbsp; 空格的一半        &gt;   大于号        &lt;   小于号        &copy; 版权符号        &reg;  注册符号

总结下：

行标签：包含a、span、em、strong、img、var；
块标签：包含p、div、ul、ol、li、dl、dt、dd、h1~h6；

推荐前端软件HBuilder

DOM加载顺序
1. 解析HTML结构。
2. 加载外部脚本和样式表文件。引入的js或者CSS文件
3. 解析并执行脚本代码。
4. 构造HTML DOM模型。
5. 加载图片等外部文件。
6. 页面加载完毕。
基本上是从上到下顺序加载

阅读全文

0 0