HTML快速学习

目录

一、网页元素属性

1.全局属性

2.标签

2.1其他标签

2.2表单标签

2.3图像标签

2.4列表标签

2.5表格标签

2.6文本标签

二、编码

1.字符的数字表示法

2.字符的实体表示法

三、实践一下


一、网页元素属性

1.全局属性

id属性是元素在网页内的唯一标识符。

class属性用来对网页元素进行分类。

title属性用来为元素添加附加说明。

style属性用来指定当前元素的 CSS 样式。

contenteditable属性允许用户修改内容。

spellcheck属性就表示,是否打开拼写检查。

data-属性用于放置自定义数据。只能通过CSS或者JavaScript利用。

2.标签

2.1其他标签

标签表示一个可以关闭的对话框。

标签用来折叠内容,浏览器会折叠显示该标签的内容。其中标签用来定制折叠内容的标题。

如何使用???

这是一段解释文本。
这是标题 这是一段解释文本。

HTML快速学习_第1张图片

2.2表单标签

 

标签用来定义一个表单,所有表单内容放到这个容器元素之中。

标签是一个块级容器标签,表示控件的集合,用于将一组相关控件组合成一组。

标签用来设置

控件组的标题,通常是
内部的第一个元素,会嵌入显示在控件组的上边框里面。

标签是一个行内元素,提供控件的文字说明,帮助用户理解控件的目的。

标签是一个行内元素,用来接收用户的输入。

type属性决定了的形式。

表单标签如何使用???








学生情况登记

年龄:

性别:


限制输入:




复选框:
单选框:
性别

邮件类型:
密码类型:
文件类型: 隐藏类型:
数字类型: 滑块类型:

结果如下:

HTML快速学习_第2张图片

2.3图像标签

标签用于插入图片。它是单独使用的,没有闭合标签。src属性指定图片的网址

图片说明

2.4列表标签

    标签是一个有序列表容器(ordered list),会在内部的列表项前面产生数字编号。

      标签是一个无序列表容器(unordered list),会在内部的列表项前面产生实心小圆点,作为列表符号。

    • 表示列表项,用在
          容器之中。

          如何使用???

          有序列表:
          
          1. 列表项 A
          2. 列表项 B
          3. 列表项 C
          无序列表:
          • 列表项 A
          • 列表项 B
          • 列表项 C

          2.5表格标签

          是一个块级容器标签,所有表格内容都要放在这个标签里面。

          总是里面的第一个子元素,表示表格的标题。该元素是可选的。

          都是块级容器元素,且都是
          的一级子元素,分别表示表头、表体和表尾。

          的一级子元素,用来包含一组列的定义。的子元素,用来定义表格的一列。

          标签表示表格的一行(table row)。如果表格有,那么就放在这些容器元素之中,否则直接放在
          的下一级。

          都用来定义表格的单元格。其中,是标题单元格,是数据单元格。

          2.6文本标签

          是一个通用标签,表示一个区块(division)。

          标签是一个块级元素,代表文章的一个段落(paragraph)。

          是一个通用目的的行内标签(即不会产生换行),不带有任何语义。


          让网页产生一个换行效果。该标签是单独使用的,没有闭合标签。


          用来在一篇文章中分隔两个不同的主题,浏览器会将其渲染为一根水平线。该标签是单独使用的,没有闭合标签。

          是一个块级元素,表示保留原来的格式(preformatted),即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。

          是一个行内元素,表示它包含的内容具有很强的重要性,需要引起注意。浏览器会以粗体显示内容。

          是一个行内标签,表示强调(emphasize),浏览器会以斜体显示它包含的内容。

          二、编码

          1.字符的数字表示法

          字符的码点表示法是&#N;(十进制,N代表码点)或者&#xN;(十六进制,N代表码点),比如,字符a可以写成a(十进制)或者a(十六进制),字符可以写成(十进制)或者(十六进制),浏览器会自动转换它们。

          hello

          十进制

          hello

          十六进制

          hello

          注意,HTML 标签本身不能使用码点表示,否则浏览器会认为这是所要显示的文本内容,而不是标签。比如,

          一旦写成<p>或者<p>,浏览器就不再认为这是标签了,而会当作文本内容将其显示为

          2.字符的实体表示法

          - `<`:`<` 
          - `>`:`>` 
          - `"`:`"`
          - `'`:`'`
          - `&`:`&`
          - `©`:`©`
          - `#`:`#`
          - `§`:`§`
          - `¥`:`¥`
          - `$`:`$`
          - `£`:`£`
          - `¢`:`¢`
          - `%`:`%`
          - `*`:`$ast;`
          - `@`:`@`
          - `^`:`^`
          - `±`:`±`
          - 空格:` `

          三、实践一下

          创建前端页面,使用PHP将前端输入的账号和密码进行打印。

          
          
          
              
              
              Document
          
          
              
          账号:
          密码:

          HTML快速学习_第3张图片

           HTML快速学习_第4张图片

          实践主要是认识在URL中的get和post的区别?

          (1)get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。

          (2)post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

          你可能感兴趣的:(前端,html5,javascript)