HTML

1. 简介：

Hyper Text Markup Language(超文本标记语言) 简写：HTML

HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

2. 创建HTML文件

2.1 创建一个web工程（静态的web工程）

 2.2 在工程下创建html页面

 选择运行的浏览器

运行成功。

3. html的书写规范 

        Hello World!

注释：在上面的代码中使用的是html中使用的注释格式

4. HTML标签介绍

4.1 标签的格式：

        封装的数据

4.2 标签名大小写不敏感。

4.3 标签拥有自己的属性。

        4.3.1基本属性：bgcolor="red"                        可以修改简单的样式效果

        4.3.2时间属性：οnclick="alert('你好！'）;"     可以直接设置事件响应后的代码

4.4 标签又分为单标签和双标签。

        4.4.1单标签格式：                           br 换行        hr水平线

        4.4.2双标签格式：...封装内容...

Hello World!
按钮

其中
属于单标签（自结束标签）；

属于双标签中的开始标签，属于双标签中的结束标签

运行结果如上。

4.5 标签的语法

        4.5.1标签不能交叉嵌套

正确：

        

错误：

       

        4.5.2标签必须正确闭合

有文本内容的标签：

正确：

       

错误：

        

没有文本内容的标签：

正确：

错误：

       4. 5.3属性必须有值，属性值必须加引号

正确：       

错误：       

错误：       

        4.5.4注释不能嵌套

正确：

错误：<!--注释内容-->

        特别注意：有的时候错误语法也能正常运行，是因为浏览器会自动尽可能地帮助我们修复错误带来的影响。

5. 常用标签的介绍

5.1 font字体标签

        font字体标签是字体标签，它可以用来修改文本的字体，颜色，大小

        color属性修改颜色        face属性修改字体        size属性修改本文大小

举个例子：

字体标签

字体标签

 

 5.2 特殊字符

        5.2.1在编辑页面时，我们有可能遇到有功能性的符号显示在页面上

例如：

但在使用中浏览器会自动应用其功能，所以在这种情况下，我们需要使用特殊字符。

解决方法：将"<"替换成"<"，将">"替换成">"。使用方法如下：

<br>

        5.2.2使用多个空格或回车时，HTML会只保留一个。

解决方法：将"空格"换成" "。使用方法如下：

这需要很多     空格

5.3 标题标签

在HTML中只有标题1到标题6，它们的使用方法如下：

  
标题1
标题2
标题3
标题4
标题5
标题6

align属性是对齐属性

left        最对齐（默认）        center        居中        right(右对齐）

它的使用方法如下：

  
标题1
标题2
标题3
标题4
标题5
标题6

 5.4 **超链接

定义：在网页中所有点击之后可以跳转的内容都是超链接。

a标签是超链接，href属性设置连接的地址，target属性两种跳转形式（_self（默认）在当前窗口跳转，_blank打开新窗口跳转。

使用方法如下：

  百度
百度
百度

5.5 列表标签

列表包含：无序列表、有序列表。

有序列表前有序号，无序列表前无序号，因为无序列表前符号可以改，所以我们常用的是无序列表。

5.5.1无序列表使用方法：

ul是无序列表，li是列表项，type可以改变列表形式。

  
    
      博主    
    
超帅
    
对吧
  

  
    
      博主    
    
超帅
    
对吧
  

5.6 img标签 

img标签可以在html页面上显示图片。

        其中src属性可以设置图片的路径，在web中路径分为相对路径和绝对路径两种：

        相对路径：

                .                表示当前文件所在的目录

                ..               表示当前文件所在的上一级目录

                文件名       表示当前文件所在目录的文件，相当于./文件名        ./可以省略

        绝对路径：

                格式是：http://ip:port/工程名/资源路径

        width属性设置图片的宽度。

        height属性设置图片的高度。

        border属性设置图片边框大小。

        alt属性设置当指定路径找不到图片时，用来替代显示的文本内容。

使用效果如下：

 5.7 表格标签

        table是表格标签，tr是行标签，th是表头标签，td是单元格标签（align属性设置单元格文本对齐方式），b是加粗标签。

        boder属性可以设置边框。

        width,height属性可以设置宽高。

        cellspacing属性可以设置单元格间距（特别地：当其设置为0时，单元格之间并未重叠）。

它们的使用效果如下：

  
    
      
1.1
      
1.2
      
1.3
    
    
      
2.1
      
2.2
      
2.3
    
    
      
3.1
      
3.2
      
3.3
    
  

 5.8 *跨行跨列表格

        单元格标签（表头标签）中使用colspan属性可以设置单元格跨列，使用rowspan可以设置单元格跨行。

使用效果如下：

  
    
      
1.1
      
1.3
      
1.4
      
1.5
    
    
      
2.1
      
2.2
      
2.4
      
3.5
    
    
      
3.1
      
3.4
      
3.5
    
    
      
3.1
      
3.2
      
3.3
      
3.4
      
3.5
  
  

5.9 了解iframe框架标签（内嵌窗口） 

        iframe标签可以在页面上开辟一个小区域显示一个单独的页面

                iframe和a标签组合使用的步骤：

                        （1）在iframe标签中使用name属性定义一个名称

                        （2）在a标签的target属性上设置iframe的name的属性值

  这是一个单独的标签
      
    
hello 
  

5.10 **表单标签 

        5.10.1表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。

        form标签就是表单

                input type=text                是文件输入框        value设置默认显示内容

                input type=password      是密码输入框        value设置默认显示内容

                input type=radio             是单选框                name属性可以对其进行分组        checked="checked"表示默认选中

                input type=checkbox      是复选框                checked="checked"表示默认选中

                select                             是下拉列表框

                        option        是下拉列表中的选项        selected="selected"设置默认选中

                textarea                          是多行文本输入框（起始标签和结束标签中间内容是默认值）

                        rows          属性设置可以显示几行的高度

                        cols           属性设置每行可以显示几个字符宽度

                input type="reset"           是重置按钮              value属性修改按钮上的文本

                input type="submit"        是提交按钮按钮       value属性修改按钮上的文本

                input type="button"        是按钮                      value属性修改按钮上的文本

                input type=file                是文件上传域

                input type=hidden          是隐藏域                  当我们要发送某些信息，而这些信息不需要用户，就可以使用隐藏域（提交的同时发送给服务器）

它们的使用效果如下：

      用户名称：
    用户密码：
    确认密码：
    性别： 男女
    兴趣爱好:JavaC++Python
    国籍：   请选择国籍   中国   美国   俄罗斯   
    自我评价：默认值
    
      

         5.10.2表单格式化

        表单的格式化就是将其装进表格里。

它的使用效果如下：

      
用户注册
    
      
 
用户名称：
 
      
      
 
用户密码：
 
      
      
 
确认密码：
 
      
      
 
性别：
 
   男   女 
      
      
 
兴趣爱好:
 
      JavaC++Python
 
      
      
 
国籍：
 
        请选择国籍     中国     美国     俄罗斯    
      
      
 
自我评价：
 
默认值
      
      
 
 
 
      
      
 
      
    
  

        5.10.3 表单提交的细节 

        action属性设置提交的服务器地址

        method属性设置提交的方式GET（默认值）或POST

在提交后可跳转并传递信息给目标界面。

        表单提交的时候，数据没有发送给服务器的三种情况：

                （1）表单项没有name属性值

                （2）单选、复选（下拉列表中的option标签）都需要添加value属性

                （3）表单项不在提交的form标签中

        GET请求的特点是：

                 （1）浏览器地址栏中的地址是：action属性（+？+请求参数）

                            请求参数的格式是：name=value&name=value

                 （2） 不安全

                 （3）它有数据长度的限制

        POST请求的特点是：

                 （1）浏览器地址栏中的地址只有action属性值

                 （2）相对于GET请求安全

                 （3）理论上没有数据长度的限制

5.11 其他标签

        div标签        默认独占一行

        span标签     它的长度是封装数据的长度

        p段落标签    默认会在段落的上方或者下方各空出一行来（如果已有就不再空）

使用效果如下：

  
div标签1
  
div标签2
  span标签1  span标签2  
p段落标签1
  
p段落标签2

 

网络标签：属性 标签 标题