HTML基础快速入门笔记

基础标签

HTML基础快速入门笔记_第1张图片
其中


有格式color,如 color = ‘red’
有width如width = 200(像素px) 或者width = 50%(比例)
以及 rglin = ‘left’ (right,center)
还有size,高度,如size = ‘10’

格式标签

加粗
斜体

居中(不赞成使用)
定义文本格式有
1.color 定义颜色
(1) color = ‘red’
(2) color = rgb(数值1,数值2,数值3) 红绿蓝三原色调色数值取值范围0-255(不推荐)
(3)color = #00FF00 同(2)不过是16进制的比例
2.face定义字体如 face = "楷体’
3.size定义大小如size = ‘5’

html特殊字符集

比如以下
HTML基础快速入门笔记_第2张图片
HTML基础快速入门笔记_第3张图片
完整参考https://www.w3school.com.cn/tags/html_ref_entities.html

图片标签

< img src = "./image/picture1" alt ="好看小姐姐" >

这样就可以导入电脑的照片,嘻嘻嘻
HTML基础快速入门笔记_第4张图片
HTML基础快速入门笔记_第5张图片
属性有height,width,align常用

列表标签

无序列表

    定义无序列表
  • 定义列表项目
    type可以定义无序列表的表头形状有square,circle,disc

    <ul type="disc">
        <li>睁开眼睛li>
        <li>洗漱li>
        <li>穿衣服li>
        <li>穿鞋li>
        <li>出门li>
    ul>
    

      定义有序列表
    1. 定义列表项目同上
      type可设置有序的序号类型如ABC,123,I, II, III, IV
      start可设置起点序号

      <ol type=A start="2">
          <li>睁开眼睛li>
          <li>洗漱li>
          <li>穿衣服li>
          <li>穿鞋li>
          <li>出门li>
      ol>
      

      运行结果
      HTML基础快速入门笔记_第6张图片

      链接标签

      定义超链接,可跳转
      href属性是最关键的属性,是规定指定的链接的URL
      target可以实现在何处打开,比如target = “_blank” 就是跳转到新的一个标签页
      而target = "_self"就是不打开新的标签页在本页跳转
      herf也可以指定邮件例如

      联系我a><br>
      
      
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>链接标签title>
      head>
      <body>
          点我a><br>
          点我a><br>
          点我a><br>
          列表标签a><br>
          联系我a><br>
          <img src="./image/picture02.png">a>
      body>
      html>
      

      HTML基础快速入门笔记_第7张图片
      可以看到不同的效果

      表格标签

      HTML基础快速入门笔记_第8张图片

      标签创建表格定义表格
      表格中的行
      表格中的单元格 (tr 和 td 都可以有自己属性color和align颜色和对齐方式)

      1. coslpan 规定单元格可横跨的列数
      2. rowspan 规定单元格可横跨的行数

      表格的表头单元格
      cellpadding规定单元边沿与其内容之间的空白
      cellspacing规定单元格之间的空白
      bordoder规定表格边框的宽度
      width规定表格的宽度
      bgcolor背景颜色
      align对齐格式

      主要代码:

      <body>
      <tr><th>编号th>
              <th>姓名th>
              <th>成绩th>
          tr>
          <tr>
              <td>1td>
              <td>Atd>
              <td>89td>
          tr>
          <tr>
              <td>2td>
              <td>Btd>
              <td>96td>
          tr>
      
      table>
      body>
       
        

      运行结果为:
      HTML基础快速入门笔记_第9张图片

      表示表头
      表示表体
      表示表尾(三者没啥改变性作用但是增加可读性和css一起用)
      对单元格进行合并操作以及单元格的对齐方式后

      body部分代码:

      <body>
      
      定义表格标题
      <caption>学生信息表caption> <th>编号th> <th>姓名th> <th>成绩th> tr> <td rowspan="2">1td> <td>Atd> <td>89td> tr> <td>Btd> <td>96td> tr> <td>3td> <td colspan="2">Ctd> tr> table> body>

      运行结果为
      运行结果

      表单标签

      HTML基础快速入门笔记_第10张图片
      post请求到的username和password可以在F12里面的network里的header里面的最下面找到

      代码例子如下

      <body>
      
          <form action="#" method="get">
              用户名:<input name="username"><br>
              密码:<input name="password"><br>
              <input type="submit" value="登录">
          form>
      body>
      

      运行结果如下
      HTML基础快速入门笔记_第11张图片
      在这里插入图片描述

      表单项标签

      HTML基础快速入门笔记_第12张图片

      <body>
      
      <form action="#" method="get">
          <label for="username">用户名label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
          <label for="password">密码label>:<input type="password" name="password" placeholder="请输入密码" id="password"><br>
          <label>性别label>:<br>
          <br>
          爱好:<input type="checkbox" name="hobby" value="shopping">购物
          <input type="checkbox" name="hobby" value="java">JAVA
          <input type="checkbox" name="hobby" value="game">游戏
          <br>
          <input type="submit" value="登录">
      form>
      body>
      

      HTML基础快速入门笔记_第13张图片
      HTML基础快速入门笔记_第14张图片

      <body>
      
          <form action="#" method="get">
              <label for="username">用户名label>:<input type="text" name="username" placeholder="请输入用户名" id="username">
              <br>
              <label for="password">密码label>:<input type="password" name="password" placeholder="请输入密码" id="password">
              <br>
              <label>性别label>:<br>
              <br>
              爱好:<input type="checkbox" name="hobby" value="shopping">购物
              <input type="checkbox" name="hobby" value="java">JAVA
              <input type="checkbox" name="hobby" value="game">游戏
              <br>
              取色器:<input type="color" name="color">
              <br>
              生日:
              <br>
              生日:
              <br>
              邮箱:<input type="email" name="email">
              <br>
              年龄:<input type="number" name="age">
              <br>
              图片:<input type="file" name="picture">
              <br>
              隐藏域:<input type="hidden" name="id" value="1234">
              <br>
              <input type="submit" value="登录">
              <br>
              <input type="image" src="../html/image/picture02.png" width="120" height="150">
      
      
          form>
      body>
      

      HTML基础快速入门笔记_第15张图片
      下面是一个注册界面的实例

      
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>注册页面title>
      head>
      <body>
          <form action="#" method="get">
          <table align="center" width="30%" cellpadding="0" cellspacing="0" border="1">
              <tr>
                  <td>用户名td>
                  <td><input type="text" name="username" placeholder="请输入用户名">td>
              tr>
              <tr>
                  <td>密码td>
                  <td><input type="password" name="password" placeholder="请输入密码">td>
              tr>
              <tr>
                  <td>Emailtd>
                  <td><input type="email" name="email" placeholder="请输入邮箱">td>
              tr>
              <tr>
                  <td>姓名td>
                  <td><input type="text" name="name" placeholder="请输入姓名">td>
              tr>
              <tr>
                  <td>手机号td>
                  <td><input type="number" name="phoneNumber" placeholder="请输入手机号">td>
              tr>
              <tr>
                  <td>性别td>
                  <td><input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female">td>
              tr>
              <tr>
                  <td>出生日期td>
                  <td><input type="date" name="birthday" >td>
              tr>
              <tr>
                  <td>验证码td>
                  <td><input type="text" name="checkCode" placeholder="请输入验证码">td>
              tr>
              <tr>
                  <td colspan="2" align="center"><input type="submit" value="注册">td>
              tr>
      
          table>
          form>
      body>
      html>
      

      HTML基础快速入门笔记_第16张图片

      你可能感兴趣的:(html)