HTML语言

2021-01-04

---

1、HTML语言介绍

HTML:超文本标记语言，不是编程语言，而是一系列标记的集合

Head：头部信息，内容不会出现在网页上

Body：网页的主要内容

Meta：标签只有开始元素，charset设置网页的编码

标签大部分成对出现，分开始和结束标签：

双标记标签：<p>主体内容</P> <p></p> 简写：<p/>

单标记标签：永远没有主体内容，eg：<br/>,<hr/>;<br></br>❌

特殊标签：meta没有结束，只有开始

2、HTML常见标签

body里面

标题h与分割线标签hr

标题标签：<h1></h1>

分割线标签：<hr/>

width：宽度：800px像素值/百分比，相对于窗口的占比

浏览器在解析html文件时，会忽略文档中的空格回车等字符，+<br/>

字体格式化标签font

size：1-7，默认字体大小是3；

加粗标签：<b></b>

斜体标签：<i></i>

段落p与换行br标签

实体字符与注释

有些字符，像<对html有特殊意义，不允许在文本中使用，要使用必须使用实体字符

字符实体有三部分：&实体名称；

3、HTML图片标签

HTML 是超文本标记语言，即 HTML 中只能编写文本内容。是无法编写图片的。

图片需要 单独的进行存放，采用特有的标签把图片连接进来 ，并统一进行显示。

 

图片标签：img

src：图片的引用路径

width，height：图片的宽高，以像素为单位

alt：替代文本，图片路径错误

title：悬浮文字

4、HTML列表标签

<ul>和<ol>

<ul>无序列表：type属性用于指定项目符号，disc默认（实心圆）/circle（空心圆）/square（方块）

<ol>有序列表：type属性用于指定编号形式，1默认/A/a/I/i

超链接标签a

href属性：编写目标连接地址，可以是相对路径，也可以是绝对路径

target：目的在何处显示。_blank新窗口：_self默认值，当前窗口

5、HTML表格标签

表格标签：table

  属性：width：表格的宽度，像素绝对值或者百分比

            border：表格边线的宽度

           align：表格在页面中所处的位置

           cellpadding：单元格内容和边框的距离

           cellspacing：指定单元格之间的距离

  tr表示一行

      属性：rowspan=跨的行数；colspan=跨的列数

  td表示的是行中的列

表头标签th：是一种特殊的列，加粗且居中

6、表单标签

表单的作用：给服务器提交数据用的

表单标签：form

  属性：method：请求方式。get默认，post

             enctype：设置提交的数据的类型。application/x-www-form-urlencoded默认，还有multipart/form—data

                      存在磁盘上的数据文件使用扩展名来区分数据的类型。网络上进行传输的数据使用MIME类型来区分数据的

             text/html,text/css,text/javascript（大类型/具体类型）

         action：接收数据的服务器地址

输入标签：input

   属性：

       type：输入域的类型，默认值是text，表示普通文本。

             text：普通文本，默认值

             password：密码，用户输入内容是不可见的

             radio：单选，name相同的只能选择一个

             checkbox：复选框（如果一个都不选，则不会提交数据

             hidden：隐藏输入域，不会显示在页面上，用于偷偷向服务器提交数据

             submit：提交表单

             reset：重置表单（恢复默认）

             button：普通按钮，点击没有任何效果，要结合javascript使用

             image：图片标签，功能和submit完全一致

     id：html中的所有元素标签都有该属性，用于唯一标识这个标签，原则上页面中的id不能重复

     name：输入域的名称。向服务器提交数据时是按照名称进行提交的。

     value：输入域的名称。向服务器提交数据时是按照名称提交的

     placeholder:文本框内用来信息提示

     checked="checked"：单选按钮、复选框有效。表示默认选中的值

下拉列表标签：select

    属性：multiple="multiple"，表示多选（选择时按住ctrl）

              size="10"加上之后，变为了列表选择。

              option:下拉选项.selected="selected"默认选中的值

文本域标签：textarea   

属性：rows：行数

          cols：列数

七、框架标签

frameset框架集标签，不能和body一起使用

frame框架标签

    属性：src：指定页面的路径

              norsize：框架分割后禁止调整

超链接：a：target：子框架的名称

属性：rows：文本域的行数  160，*：表示上下两部分，上占160，下占剩余的全部

              cols：文本域的列数