快速入门HTML

2023-12-15 22:14:26

与其明天开始,不如现在行动!

文章目录


HTML

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

标签

  1. 标题:h1-h6
  2. 段落:p
  3. 换行:br(只是换行),hr(加分割线的换行)
  4. 有序列表:ol
  5. 无序列表:ul
  • 列表项:li
  1. 超链接:<a> </a>

    • href

      • 完整的url

        • <a href = "http://www/baidu.com">百度</a>
          
      • 相对路径:当前资源所在包下的路径去找资源

        • ./开头:表示当前资源所在路径,可以省略
        • …/开头:表示当前资源的上一层路径
      • 绝对路径:固定的位置去找资源,以 / 开头

    • targrt

      • _self:在当前窗口打开资源

        <a href = "http://www/baidu.com" target = "_self">百度</a>
        
      • blank:开启新窗口打开资源,用法同self

  2. 图片:<img>

    • src:定义图片的路径

    • title:定义鼠标悬停时提示的文字

    • alt:定义图片加载失败时提示文字

      <img  src = "demo/logo.img"  width = "300px"  title = "百度"  alt = "百度logo"        />
      
  3. 表格:<table>

    • thead:表头
    • tbody:表体
    • tfoot:表尾
      • tr:表中的一行
        • td:行中的一个单元格
        • th:自带 加粗 居中 效果的td
      • rowspan:纵向合并
      • colspan:横向合并
    <table>
        <thead>
            <tr>
                <td>排名</td>
                <td>姓名</td>
                <td>分数</td>
            </tr>
        </thead>
    </table>
    
  4. 表单: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 = “样式名:样式值; 样式名:样式值…”
  1. 布局:

    • 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>
  1. 特殊字符:实体,对于html代码来说某些符号是有特殊含义的,如果想显示这些特殊符号,需要进行转义

    &lt; h1 &gt; 一级标题 &lt; h1 &gt;
    

💎总结

本文中若是有出现的错误请在评论区或者私信指出,我再进行改正优化,如果文章对你有所帮助,请给博主一个宝贵的三连,感谢大家😘!!!


文章来源:https://blog.csdn.net/weixin_54620350/article/details/135024959
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。