当前位置：Gxlcms > html代码 > 前端基础之初识HTML_html/css_WEB-ITnose

前端基础之初识HTML_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：26人阅读

HTML

HTML（Hypertext Markup Language）即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面.哈哈.

下面我们来学习 HTML 基础知识！

标签、符号

            ------------------------------------------    H1标签
    H2标签
    H3标签
    H4标签
    H5标签
    H6标签
------------------------------------------    块级标签
    div1
    内联标签、行内标签
    div1------------------------------------------    符号
    ©     < a >

---

展示效果如下：

---

段落、换行

段落/换行

我们知道两个进程如果需要进行通讯最基本的一个前提能够唯一的标识一个进程协议＋端口号唯一标识网络中的一个进程。

我们知道两个进程如果需要进行通讯最基本的一个前提能够唯一的标识
一个进程协议＋端口号唯一标识网络中的一个进程。

a 标签、锚

    a标签，href，当前页打开
>    点我，跳转百度    新页打开
>    点我，跳转百度    锚mao
    第一章    第二章    第三章    第四章    第五章    
    第一章内容
    第二章内容
    第三章内容
    第四章内容
    第五章内容

---

展示效果如下：

---

select 标签

    select标签

input 系列:

checkbox: (复选项)    input系列
            radio: (单选项)        普通输入框：    普通
    password
        上传文件：    上传文件
    几种按钮：    按钮
            多行文本框:    多行文本框
    框中内容多行文本框与text文本框区别:    多行文本框与text区别
        label 标签：    label标签
    没有应用label，点击姓名字体时没反应
    姓名：    婚否：    有应用label，点击姓名有反应(for)
    姓名：            婚否：

---

展示效果如下：

---

ul、ol、dl 比较:

    ul,自动在前面加点.
            ul.li
        ul.li
        ul.li
        ul.li
    
------------------------------------------    ol,自动排序
            ol.li
        ol.li
        ol.li
        ol.li
    
------------------------------------------    dl,列表
            湖南
        长沙
        河北
        石家庄

---

展示效果如下：

---

table 表格：

    table 表格，无边框
                        主机名             IP             状态         
                    baidu1.com             1.1.1.1             在线         
                    baidu2.com             1.1.1.2             down机         
    
------------------------------------------   table 表格，边框
                        主机名             IP             状态         
                    baidu1.com             1.1.1.1             在线         
                    baidu2.com             1.1.1.2             down机         
    
------------------------------------------    table 表格，边框，表头:将td换成th，同时还自动加粗了
                        主机名             IP             状态         
                    baidu1.com             1.1.1.1             在线         
                    baidu2.com             1.1.1.2             down机         
    
------------------------------------------    table 表格，为了代码看起来更易懂，则分别在表头加了thead 和 tbody，这种方法推荐使用
                                        主机名                 IP                 状态             
        
                                    baidu1.com                 1.1.1.1                 在线             
                            baidu2.com                 1.1.1.2                 down机             
        
    
------------------------------------------    table 表格，合并单元格,列合并，colspan="2",占用两列
                                        主机名                 IP                             
        
                                    baidu1.com                 1.1.1.1                 在线                 1.1.1.1                 在线             
                            baidu2.com                 1.1.1.2                 down机                 1.1.1.2                 down机             
        
    
------------------------------------------    table 表格，合并单元格,列合并，colspan="4",占用四列
                                        主机名                 IP                             
        
                                    baidu1.com                 1.1.1.1                 在线                 1.1.1.1                 在线             
                            baidu2.com                 1.1.1.2                 down机                 1.1.1.2                 down机             
        
    
------------------------------------------    table 表格，合并单元格,行合并，rowspan="3",占用3行
                                        主机名                 IP                 状态             
        
                                    baidu1.com                 1.1.1.1                 在线             
                            baidu2.com                 1.1.1.2                 down机             
                                            1.1.1.2                 down机             
                                            1.1.1.2                 down机

主机名	IP	状态
baidu1.com	1.1.1.1	在线
baidu2.com	1.1.1.2	down机

主机名	IP	状态
baidu1.com	1.1.1.1	在线
baidu2.com	1.1.1.2	down机

主机名	IP
baidu1.com	1.1.1.1	在线	1.1.1.1	在线
baidu2.com	1.1.1.2	down机	1.1.1.2	down机

主机名	IP
baidu1.com	1.1.1.1	在线	1.1.1.1	在线
baidu2.com	1.1.1.2	down机	1.1.1.2	down机

主机名	IP	状态
baidu1.com	1.1.1.1	在线
baidu2.com	1.1.1.2	down机
1.1.1.2	down机
1.1.1.2	down机

---

展示效果如下：

---

fieldset 边框:

    fieldset 边框
            登录        用户名：
        密码：
    
------------------------------------------    form 表单,botton,reset提交按钮默认需要结合js等绑定事件，否则点击不生效，啥也不做，而submit可以直接提交
        ------------------------------------------    form 表单,根据关键字向sogou服务器发起请求，从而进行搜索
            ------------------------------------------

前端基础之初识HTML_html/css_WEB-ITnose

HTML

标签、符号

H1标签

H2标签

H3标签

H4标签

H5标签

H6标签

块级标签

内联标签、行内标签

符号

---

展示效果如下：

---

段落/换行

a 标签、锚

a标签，href，当前页打开

新页打开

锚mao

---

展示效果如下：

---

select标签

input系列

普通

password

上传文件

按钮

多行文本框

多行文本框与text区别

label标签

没有应用label，点击姓名字体时没反应

有应用label，点击姓名有反应(for)

---

展示效果如下：

---

ul,自动在前面加点.

ol,自动排序

dl,列表

---

展示效果如下：

---

table 表格，无边框

table 表格，边框

table 表格，边框，表头:将td换成th，同时还自动加粗了

table 表格，为了代码看起来更易懂，则分别在表头加了thead 和 tbody，这种方法推荐使用

table 表格，合并单元格,列合并，colspan="2",占用两列

table 表格，合并单元格,列合并，colspan="4",占用四列

table 表格，合并单元格,行合并，rowspan="3",占用3行

---

展示效果如下：

---

fieldset 边框

form 表单,botton,reset提交按钮默认需要结合js等绑定事件，否则点击不生效，啥也不做，而submit可以直接提交

form 表单,根据关键字向sogou服务器发起请求，从而进行搜索

---

展示效果如下：

---

人气教程排行