HTML 学习笔记

最新推荐文章于 2024-09-21 07:53:40 发布

hxznh

最新推荐文章于 2024-09-21 07:53:40 发布

阅读量72

点赞数

分类专栏：学习笔记文章标签： html 学习前端

本文链接：https://blog.csdn.net/hxznh/article/details/125515613

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML

快速入门

基本语法规则：
1. html文档后缀名： .html 或者 .htm
2. 标签分为：
  1. 围堵标签：有开始和结束的标签如 <html> </html>
  2. 自闭和标签：开始和结束标签在一起，如：<br/>
3. 标签可以嵌套，但需要正确嵌套，同括号配对
4. 在开始标签中可以定义属性，属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写

文件标签：构成html最基本的标签
- html：html文档的根标签
- head：头标签，用于指定html文档的一些属性，引入外部的资源。
- title：标题标签
- body：体标签
- < !DOCTYPE html> : HTML5中定义该文档是html文档
  
  </!doctype>
文本标签：和文本有关的标签
- 注释：
- <h1> - <h6> ：标题标签
- <p> ：段落标签
- <a>：超链接标签
  - 功能
    1. 可以被点击，产生一定样式
    2. 点击后跳转到 href 指定路径
      - 保留1功能，删除2功能
        
        <a href="javascript:void(0);" id="del"> 点击删除 </a>
- <br>：换行标签
- <hr>：展示一条水平线
  - ~~属性:~~
    - color 颜色
    - width 宽度
    - ~~size 高度~~
    - ~~align 对齐方式~~
      - center 居中
      - left 左对齐
      - right 右对齐
- <b> : 加粗
- <i> : 斜体
  - ~~<font> : 字体标签~~
    - 属性：
      - color 颜色
      - size 大小
      - face 字体
- 属性：
  - color ：
    1. 英文单词： red green blue
    2. rgb(x, y, z) 0~255
    3. #xyz 00~FF
  - width：
    1. 数值： width = ‘20’，单位 px (像素)
    2. 数值%：占比相对于父元素的比例
~~列表标签~~：
1. ~~有序列表~~：
  - <ol type = "", start = "">：样式，从 xxx 开始
  - <li>每项列表内容</li>
2. ~~无需列表~~：
  - <ul>

超链接：

<!-- 在本页面打开网址， 默认值 -->
<a href = "链接网址", target = "_self"> Text </a>
<!-- 在空白页打开网址 -->
<a href = "链接网址", target = "_blank"> Text </a>

块标签
1. <div>: 每个div占满一整行，块级标签
2. span：文本信息在一行展示，行内标签，没有任何特殊效果
语义化标签：html5中为了提高程序可读性，提供的一些标签。
1. <header>
2. <footer>

表格标签

caption: 表格标题
table : 定义表格
- width: 宽度
- border: 边框
- cellpadding: 单元格内容与边框的距离
- cellspacing: 单元格边框线之间的距离
- bgcolor: 表格背景色
tr：定义行
td: 定义单元格
- colspan: 合并列
- rowspan: 合并行
th：定义表头单元格
：语义化标签

<table border="1" width="50%" cellspacing="0">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>

    <tr>
        <td>1</td>
        <td>zjz</td>
        <td>100</td>
    </tr>

    <tr>
        <td>2</td>
    </tr>
</table>

语义化标签

为了提高程序可读性，提供的一些标签

<header></header>
<footer></footer>

表单标签

用于采集用户输入数据，用于和服务器交互
标签: form
用于定义表单，可以定义一个范围，代表采集用户数据的范围

属性

action: 指定提交数据的 URL
method: 提交方式
- 分类，一共7种，下两种比较常用
  - get:
    1. 请求参数会在地址栏中显示
    2. 请求参数与大小有限
    3. 不太安全（会被直接看到）
  - post:
    1. 请求参数不会在地址栏中显示，会封装在请求体中（见HTTP协议）
    2. 请求参数大小没有限制
    3. 比较安全

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

表单项标签

input: 可以通过 type 属性值，改变样式
- lable：指定输入项的文字描述信息
  - label 的 for 属性，一般会和 input 的 id 属性值一样，若对应，则点击 lable 区域，会在 input 输入框中获取焦点
- type 属性
  - text: 文本输入框，默认值
    - placeholder：输入框提示信息，
  - password : 密码输入框
  - radio: 单选框
    - 注意：
      1. 要想让多个单选框实现单选效果，其 name 属性必须一样
      2. 一般会给每个单选框提供 value 属性，指定其选中后提交的值
      3. 用checked 默认选中
  - checkbox: 复选框
    - 和单选框使用方式类似
  - file: 文件选择框
  - hidden: 隐藏域，不会显示到界面上，但是 value 值会被提交，用于提交一些隐藏信息
  - submit : 提交按钮
  - button: 一个按钮
  - image：用图片做一个按钮，这个按钮可以提交表单
    - src: 指定图片路径
  - email: 邮箱，会校验提交信息是否包含 @
  - date：日期，年-月-日
  - datetime-local：年-月-日时:分:秒
  - number: 只允许输入数字
select: 下拉列表
- option：列表项
textarea:
- rows: 指定初始行数
- cols: 指定初始列数