HTML知识点总结

最新推荐文章于 2024-06-04 08:13:24 发布

笑魇依然

最新推荐文章于 2024-06-04 08:13:24 发布

阅读量122

点赞数 4

文章标签： html 前端

本文链接：https://blog.csdn.net/CFJCSDN/article/details/133145436

版权

HTML知识点总结

1.介绍

介绍：超文本标记语言

2.标签与属性

标签可以有0到多个属性

3.标签允许嵌套

4.注释

<!--注释内容 -->

5.简单的HTML文档结构

<html>
            <head></head> <!-- 页面声明的信息，引入css，引入js，... -->
            <body></body> <!-- 页面中展示的内容 -->
        </html>

6.标签的分类

1.行级标签：可以和文本，行级标签一行展示，宽和高为内容的宽和高，没有内容没有宽和高，不可以设置宽和高。

2.块级标签：独占一行，宽度为父标签的宽度，高度为内容的高度，没有内容没有高度，可以设置宽和高。

7.标题标签

h1~h6 数字越大字体越小

8.段落标签

<p></p>

9.换行

<br/>

10.水平线

<hr/>

11.图片标签

<img src="图片的路径" title="鼠标悬浮时提示的信息" alt="图片加载失败提示的信息"/>

12.超链接

<a href="跳转的路径" target="打开的方式"></a>
<!--target：_self(默认)当前页打开
                     _blank 新的标签页打开
                     自定义值-->

13.列表

1.有序列表

<ol><li></li></ol>

2.无序列表

<ul><li></li></ul>

14.表格

 <table>
            <!-- 表头，加粗和居中 -->
            <thead>
                <tr>
                    <th></th>
                </tr>
            </thead>
            <!-- 表体 -->
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>
<!-- 属性：
            table属性：
                1.border：边框
                2.height：表格的高度
                3.width：表格的宽度
                4.bgcolor：表格的背景颜色
                5.align：表格的水平对齐方式（左 中 右）
                6.cellpadding：内边距（内容和单元格边框的距离）
                7.cellspacing：外边距（单元格边框和表格边框的距离）
            tr属性：
                1.height：行的高度
                2.bgcolor：行的背景颜色
                3.align：行中内容的水平对齐方式（左 中 右）
            td|th属性：
                1.width：列的宽度
                2.bgcolor：列的背景颜色
                3.align：列中内容的水平对齐方式（左 中 右） -->

15.实体

空格：&nbsp

16.表单（form）

1.介绍：

标示着一个整体，提交时可以将表单元素中的值提交到后端

2.form标签的属性：

1.action：提交的后端路径
2.method：提交方式
get：地址栏拼接参数，有大小的限制，只能进行url编码，不安全
post：请求体中传递参数，没有大小的限制，可以使用其他方式编码，安全
3.enctype：参数格式的处理，只有post请求时才有效
1.application/x-www-form-urlencoded：普通的参数（post请求默认）
2.multipart/form-data：普通参数和文件（有文件上传时必须指定）

3.表单元素：

1.文本框：

<input type="text" name="xxx"/>

2.密码框：

<input type="password" name="xxx"/>

3.日期框：

  <input type="date" name="xxx"/>

4.文件域：

<input type="file" name="xxx"/>

5.单选按钮：

  <input type="radio" name="sex" value="xxx"/>
  <input type="radio" name="sex" value="xxx"/> 
<!-- 注意事项：
                        1.name属性值相同的为一组单选按钮
                        2.name属性值相同才能有单选效果
                        3.提交时将value中的属性值提交到后端
                        4.出现多组单选按钮
                        5.checked默认选中-->

6.复选框：

<input type="checkbox" name="hobby" value="xxx"/>
<input type="checkbox" name="hobby" value="xxx"/>
                   <!-- 注意事项：
                        1.name属性值相同的为一组复选框
                        2.提交时将value中的属性值提交到后端
                        3.出现多组单选按钮
                        4.checked默认选中-->

7.下拉列表：

<select name="xxx">
    <option value="xxx"></option>
</select>
<!--注意事项：
                        1.提交时将选中的option中value属性值提交到后端
                        2.selected默认选中-->

8.文本域:

<textarea name="xxx"></textarea>

9.按钮：

<!--1.提交按钮：具有提交功能-->
<input type="submit" value="按钮中提示的文字"/>
<button type="submit">按钮中提示的文字</buuton>

<!--2.重置按钮：具有重置功能-->
<input type="reset" value="按钮中提示的文字"/>
<button type="reset">按钮中提示的文字</buuton>

<!--3.普通按钮：没有功能-->
<input type="button" value="按钮中提示的文字"/>
<button type="button">按钮中提示的文字</buuton>

4.表单元素的属性

           <!-- 1.placeholder：提示信息
                2.autofocus：自动获得焦点
                3.minlength | maxlength：最小|最大长度
                4.readonly：只读
                5.disabled：禁用-->

17.内联框架

<iframe src="默认内联的路径" frameborder="边框" width="" height="" name="xxx"></iframe>
    <!--1.内联其他的资源
        2.配合a标签使用，a标签跳转的资源在iframe中打开-->
    <a href="..." target="iframe标签的name属性值"></a>