HTML-元素

HTML

结构

<!-- 注释 -->
<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <!-- 主体内容 -->
  </body>
</html>

html 元素包括标签和内容，标签中可以包含属性

<p class="editor-note">属性效果</p>

元素

  • 双标签元素

<标签名> 内容 </标签名>

  • 单标签元素（空元素）, 用于没有内容的元素

<标签名>: <img /> <br />

  • 块级元素: 标题, 段落, 列表, 表格, 表单, div等

  • 行内元素:

    • <span>（用于样式化或脚本化的文本片段）
    • <a>（锚点/链接）
    • <img>（图像）
    • <strong>, <em>（强调文本）
    • <input>, <button>（表单元素）
    • <label>（表单标签）

  • 内联块级元素:

    • <input>（当设置 display: inline-block; 时）
    • <button>（当设置 display: inline-block; 时）
    • <img>（图像，默认行为类似于内联块级元素）

双标签元素之间的关系：

  • 嵌套关系
  • 并列关系

常用元素

文本相关元素

  1. 标题元素 h．
    h1~h6
  2. 段落元素 p.
    <p>内容</p>
  3. 加粗 b, strong; 斜体 i; 下划线 u; 删除线 s

超文本相关元素

  1. 超越普通文本, 如多媒体:

    1. 图片(img 元素)
      <img src="文件路径/文件名.后缀名" />
    2. 音频(audio 元素)
    3. 视频(video 元素)

  2. 超链接, a.
    <a href="统一资源定位符(URL)">文本</a>
    URL: "protocol 😕/ hostname[:port] / path"

列表元素

  1. 无序列表(ul: unordered list)
    <ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    </ul>
  2. 有序列表(ol: ordered list)
    <ol>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    </ol>
  3. 描述列表(dl: description list)
    <dl>
    <dt>语言</dt>
    <dd>Python</dd>
    <dd>Java</dd>
    </dl>

表单元素

<form action="url" method="get/post" name="表单名称">
  各种表单控件
</form>
  1. input元素
    <input type="属性值" value="你好">
type值 说明
text 单行输入字段
button 可点击按钮
radio 单选按钮
checkbox 复选框
hidden 隐藏的输入字段
file 输入字段和"浏览"按钮
submit 提交按钮

  1. textarea元素

    <textarea>
  文本
</textarea>

  2. select元素

    <select>
  <option>选项1</option>
  <option>选项2</option>
</select>

示例:

  1. label标签通过for属性与id相关联
  2. name属性用于定义表单数据字段的名称.
    只有带有name属性的表单元素的值才会被包含在提交的数据中.
    对于单选按钮radio和复选框checkbox，具有相同name属性值的控件会被视为一组.
  3. value属性定义input文本的初始值
    单选和复选框, select中option被选中时发送到服务器的值
    定义按钮和提交的文本
    当表单被提交时，所有设置了name属性的元素的value将被发送到服务器。对于没有value属性的元素，如未设置value的文本输入框，发送的是用户输入的值。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="" method="" name="form1" id="myform">
      <label for="username">用户名: </label>
      <input type="text" id="username" name="username" placeholder=""><br>
      
      <label for="password">密码: </label>
      <input type="password" id="password" name="password"><br>

      <label for="age">年龄: </label>
      <input type="text" id="age" name="age" placeholder=""><br>

      <label>性别: </label>
      <input type="radio" id="male" name="sex" value="male">
      <label for="male">男</label>
      <input type="radio" id="female" name="sex" value="female">
      <label for="female">女</label><br>

      <label>爱好: </label>
      <input type="checkbox" id="eat" name="hobbies" value="eat">
      <label for="eat">吃</label>
      <input type="checkbox" id="sleep" name="hobbies" value="sleep">
      <label for="sleep">睡</label><br>

      <label for="city">城市: </label>
      <select name="city" id="city">
        <option value="nanjing">南京</option>
        <option value="wuxi">无锡</option>
        <option value="taizhou">泰州</option>
      </select><br>
      
      <label for="bio">个人签名: </label>
      <textarea name="bio" id="bio"></textarea><br><br>
        
      <input type="submit" value="提交">
    </form>
  </body>
</html>

表格元素

<table width="600px" border="1" cellspacing="0">
  <caption>
    xx中学高一课程表
  </caption>
  <tr>
    <th>周一</th>
    <th>周二</th>
    <th>周三</th>
    <th>周四</th>
    <th>周五</th>
  </tr>

  <tr>
    <td>语文</td>
    <td>地理</td>
    <td>语文</td>
    <td>地理</td>
    <td>数学</td>
  </tr>
</table>
table属性 值 说明
align left
center
right		 表格位置
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 背景颜色
border pixels 边框宽度
cellpadding pixels
%		 单元边缘与其内容之间的空白
cellspacing pixels
%		 单元格之间的空白
width pixels
%		 表格宽度

子元素:

  • <caption>：表格标题

  • <thead>：表格头部

  • <tbody>：表格主体

  • <tfoot>：表格脚部

  • <tr>：表格行

  • <th>：表格头单元格

  • <td>：表格单元格

posted @ 2024-10-17 22:17  Khru  阅读(3)  评论(0)  编辑  收藏  举报