HTML入门

HTML

结构

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

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

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

元素

  • 双标签元素

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

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

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

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

双标签元素之间的关系：

  • 嵌套关系
  • 并列关系

常用元素

文本相关元素

  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>

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>07-学生信息表</title>
  </head>
  <body>
    <form action="">
      <!-- 姓名 -->
      姓名: <input type="text" placeholder="请输入用户名" /> <br />
      密码: <input type="password" placeholder="请输入密码" /> <br />

      <!-- 
        1. label: for属性跟radio的id联动
        2. 通过设置相同的name属性, 实现多个单选框的关联
      -->
      性别: <input type="radio" id="male" name="gender" />
      <label for="male">男</label>
      <input type="radio" id="female" name="gender" />
      <label for="female">女</label> <br />

      爱好: <input type="checkbox" id="eat" name="hobbies" />
      <label for="eat">吃饭</label>
      <input type="checkbox" id="sleep" name="hobbies" />
      <label for="sleep">睡觉</label>
      <input type="checkbox" id="game" name="hobbies" />
      <label for="game">打游戏</label> <br />

      城市:
      <select name="city">
        <option value="beijing" default>北京</option>
        <option value="wuhan">武汉</option>
        <option value="shanghai">上海</option>
      </select>
      <br />

      个性签名:
      <textarea>武汉中地数码-华农联合实训</textarea>
    </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>
  <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
%		 表格宽度
posted @ 2024-10-17 22:17  Khrushchefox  阅读(0)  评论(0)  编辑  收藏  举报