快速入门HTML

最新推荐文章于 2024-05-08 18:28:38 发布

不爱生姜不吃醋

最新推荐文章于 2024-05-08 18:28:38 发布

阅读量399

点赞数 6

分类专栏：前端文章标签： html java dubbo

本文链接：https://blog.csdn.net/weixin_54620350/article/details/135024959

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

与其明天开始，不如现在行动！

文章目录

HTML
- 标签
💎总结

HTML

帮助文档：https://www.w3school.com.cn/

超链接：<a> </a>
- href
  - 完整的url
    - ```
    <a href = "http://www/baidu.com">百度</a>
```
- 相对路径：当前资源所在包下的路径去找资源
  - ./开头：表示当前资源所在路径，可以省略
  - …/开头：表示当前资源的上一层路径
- 绝对路径：固定的位置去找资源，以 / 开头
- targrt
  - _self：在当前窗口打开资源
```
<a href = "http://www/baidu.com" target = "_self">百度</a>
```
  - blank：开启新窗口打开资源，用法同self
图片：<img>
- src：定义图片的路径
- title：定义鼠标悬停时提示的文字
- alt：定义图片加载失败时提示文字
```
<img  src = "demo/logo.img"  width = "300px"  title = "百度"  alt = "百度logo"        />
```

表格：<table>

thead：表头
tbody：表体
tfoot：表尾
- tr：表中的一行
  - td：行中的一个单元格
  - th：自带加粗居中效果的td
- rowspan：纵向合并
- colspan：横向合并

<table>
    <thead>
        <tr>
            <td>排名</td>
            <td>姓名</td>
            <td>分数</td>
        </tr>
    </thead>
</table>

表单：form
- action：定义数据的提交地址
- method：定义数据的提交方式
  - GET（默认）
    1. 参数会以键值对形式放在url后提交url?key=value&key=value
    2. 数据会直接暴露在地址栏，不安全
    3. 地址栏长度有限制，所以提交的数据量不大
    4. 地址栏上，只能是字符，不能提交文件
  - POST
    1. 参数默认不放到url后面，数据不会暴露在地址栏
    2. 数据是单独打包通过请求体（很大）发送，提交的数据量比较大
    3. 请求体中可以是字符，也可以是字节数据（可以提交文件）
    4. 相比于GET效率略低一些
- 表单项标签：一定要定义name属性，用于提交时明确参数名；还需要定义value属性，应用于明确实际参数
  - input：输入
    - type：输入信息的表单项类型
      - text：单行普通文本框
      - password：密码框
      - submit：提交按钮
      - reset：重置按钮
      - radio：单选按钮
        多个单选框使用相同的name属性，就会有互斥效果
        要设置value
        checked：默认勾选
      - checkbox：复选框按钮
      - hidden：隐藏于，不显示在页面上，提交时会携带
      - readonly：不允许修改，只读，表单提交时携带数据
      - disabled：不允许修改，不可用，表单提交不携带数据
      - file：文件上传
  - textarea：多行文本框（参考自我评价）
  - select：下拉框
    - option：选项
```
<form action="welcome.html" method="get">
    <input type="hidden" name="id" value="123" />
    用户名:<input type="text" name="username" /> <br>
    密码:  <input type="password" name="password" /> <br>
    性别：<input type="radio" name="gender" value="1" checked="true" />男
    性别：<input type="radio" name="gender" value="0" />女
    <br>
    爱好：
    <input type="checkbox" name="hobby" value="1" checked />篮球
    <input type="checkbox" name="hobby" value="2" />足球
    <input type="checkbox" name="hobby" value="3" />羽毛球
    <br>
    <textarea name="intro"></textarea>
    籍贯：
    <select name="pro">
        <option value="1">北京</option>
        <option value="2">西安</option>
        <option value="3">重庆</option>
        <option value="0" selected>-请选择-</option>
    </select>
    选择头像：
    <input type="file">
    <input type="submit" value="登录" />
    <input type="reset" value="清空" />
</form>
```

css：设置样式的

通过元素style属性进行设置
style = “样式名:样式值; 样式名:样式值…”

布局：
- div：块元素，自己独占一行（块），块元素的CSS样式的宽和高等都是生效的。,用来页面布局。
- span：行内元素，自己不会独占一行，行内元素的CSS样式的宽和高等都是不生效的。用来细调整（比如：包裹文字之后让文字变大变颜色等）。

<div style="border:1px;width:500px;height:200px;margin:10px auto">123</div>
<div style="border:1px;width:500px;height:200px;margin:10px auto">456</div>
<div style="border:1px;width:500px;height:200px;margin:10px auto">789</div>
<span style="border:1px solid green;width:500px;height:200px;margin:10px auto"></span>