HTML标签笔记

1、HTML概念：

HTML全称为Hyper Text Markup Language,译为超文本标记语言。

2、idea创建前端项目：

1、创建前端项目

2、创建好之后在文件中新建一个html文件

3、在页面中进行代码编辑

3、HTML标签

文本标签

作用：对html文本内容进行格式设置，例如：设置段落、换行、加粗、设置颜色、斜体等等

和文本有关的标签

• 注释：--注释内容--

• h1~h6:标题标签 h1~h6字体大小逐渐递减

• p:段落标签

• br:换行标签

• hr:水平线标签

  • 颜色属性：color color的值： ​ 颜色的单词：red,green,blue ​ rgb(值1,值2,值3)：值得范围是0~255 ​ #值1值2值3：值的范围是00~FF之间

  • 宽度属性：width width得值： ​ 数值：width='20'，数值得单位默认为px ​ 数值%：占比相对于父元素得比例

  • 高度属性：size

  • 对齐方式属性：align='center'/'left'/'right'

• b:字体加粗

• i:字体倾斜

• font:字体标签

  • 颜色属性：color

  • 大小属性：size

  • 字体属性：face

• center:居中标签

图片标签

• img:图片标签

• 作用：加载并展示页面图片资源

• 属性：

  • src : 指定图片的位置 相对路径：相对路径是指目标相对于当前文件的路径 ​ ./：代表当前目录 ./可以省略 ​ 例如：./image/1.jpg 在当前目录下找到image目录，再找到1.jpg文件 ​ ../ :表上一级目录 ​ 例如：../image/2.jpg 在上一级目录下找到image目录，再找到1.jpg文件 绝对路径：绝对路径是完整的描述文件位置的路径

    1)以盘符为起点
    2)网址

  • width:宽度属性

  • height:高度属性

  • alt:当图片非正常加载时的提示语句

列表标签

• 有序列表：ol ​ li列表项1/li ​ <li列表项2/li ​ ... /ol

• 无序列表： ul ​ li列表项1/li ​ <li列表项2/li ​ ... /ul

链接标签

• 超链接标签：a/a

• 属性：

  • href:指定访问资源的URL(统一资源定位符)

  • target:指定打开资源的方式 ​ _self：默认值，在当前页面打开 ​ _blank：在空白页面打开

块级、行级标签

• div:每一个div占满一整行。块级标签

• span：文本信息在一行展示，行内标签 内联标签

语义化标签

HTML5中增加了header和footer这两个语义标签。这两个标签为新标签。这使得我们进行布局语义更加的明显，便于代码的维护

• header:页眉

• footer:页脚

表格标签

• table:表格标签

  • 边框属性：border

  • 宽度属性：width

  • 边距属性：cellpadding

  • 间距属性：cellspacing

  • 背景颜色属性：bgcolor

  • 对齐方式属性：align

• tr:行标签

  • 背景颜色属性：bgcolor

  • 对齐方式属性：align

• td:单元格标签

  • 合并列属性：colspan

  • 合并行属性：rowspan

• 表格的其他标签

  • th:定义表头单元格

  • caption:表格标题

  • thead:表示表格的头部份

  • tbody:表示表格的体部分

  • tfoot:表示表格的脚部分

4、HTML表单标签

表单概念

表单通常用于采集用户输入的数据，然后和服务器进行交互

form：用于定义表单的标签。可以定义一个范围，范围代表采集用户数据的范围

表单属性

• action:指定提交数据的URL

• method:指定提交方式

  • get: a)求参数会在地址栏中显示。会封装到请求行中。 b)请求参数大小是有限制的。 c)不太安全。

  • post: a)请求参数不会在地址栏中显示。会封装在请求体中。 b)请求参数的大小没有限制。 c)较为安全

• name：表单项中的数据要想被提交：必须指定其name属性

• value：表单项提交的值

表单项标签

可以输入内容或者选择内容的部分，大部分的输入项使用input type="输入项类型"/，在输入项里要有一个name属性

• 文本输入框：input type="text"/ ​ 属性：placeholder 指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

• 密码输入框：input type="password"/

• 单选框：input type="radio"/ ​ 注意：

  1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。

  2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值

  3. checked属性，可以指定默认值

• 复选框：intput type="checkbox"/ ​ 注意：

  1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值

  2. checked属性，可以指定默认值

• 文件选择框：input type="file"/

• 隐藏域：input type="hidden"/ ​ 隐藏域，用于提交一些信息

• 提交按钮：input type="submit"/

• 普通按钮：input type="button"/

• 图片提交按钮：input type="image"/ ​ 属性：src 指定图片的路径

• 下拉列表：select ​ 子元素：option 指定列表项

• 本文域：textarea ​ 属性：cols 指定列数，每一行有多少个字符 ​ rows 默认多少行​

• 指定输入项的文字描述信息：label ​ label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。

5、表单总结

<form>表单标签
            属性：
                action：表单提交的请求路径
                method:表单提交方式
                    get提交
                    post提交
            表单项
                input
                    type:
                        text 文本框
                        password 密码框
                        date 日期框
                        radio 单选框
                        checkbox 多选框
                        file 文件上传框
                        submit 提交按钮
                        reset 重置按钮  恢复表单初始状态，不是清空表单
                        button 普通按钮 单独使用没有意义，需要结合JavaScript一起使用
                        hidden 隐藏域 页面不展示，但是会随着表单提交而提交数据

                    name: 表单提交的参数名称
                    value：表单提交的参数值
                        在radio和checkbox中必须设置value属性值

                    checked: 在radio单选按钮和复选框中，设置默认选中的属性

                select  下拉列表 <select>
                    下拉选项：<option>
                    提交参数名：name 放到select标签中
                    提交的参数值：value  放到option标签中
                    selected 设置下拉选项默认选中的属性
                textarea 文本域
                    name: 提交参数名称
                    cols：列
                    rows：行
                    textarea不是通过value提交表单数据。而是提交文本域中输入的内容

p6_day01_HTML总结