快速入门HTML

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

HTML

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

标签

1. 标题：h1-h6
2. 段落：p
3. 换行：br（只是换行），hr（加分割线的换行）
4. 有序列表：ol
5. 无序列表：ul

• 列表项：li

6. 超链接：<a> </a>

   • href

     • 完整的url

       • <a href = "http://www/baidu.com">百度</a>
         

     • 相对路径：当前资源所在包下的路径去找资源

       • ./开头：表示当前资源所在路径，可以省略
       • …/开头：表示当前资源的上一层路径

     • 绝对路径：固定的位置去找资源，以 / 开头

   • targrt

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

       <a href = "http://www/baidu.com" target = "_self">百度</a>
       

     • blank：开启新窗口打开资源，用法同self

7. 图片：<img>

   • src：定义图片的路径

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

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

     <img  src = "demo/logo.img"  width = "300px"  title = "百度"  alt = "百度logo"        />
     

8. 表格：<table>

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

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

9. 表单：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 = “样式名:样式值; 样式名:样式值…”

10. 布局：

    • 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>

11. 特殊字符：实体，对于html代码来说某些符号是有特殊含义的，如果想显示这些特殊符号，需要进行转义

    < h1 > 一级标题 < h1 >
    

💎总结

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