2024-10-17 22:17阅读: 3评论: 0推荐: 0

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>（图像，默认行为类似于内联块级元素）

双标签元素之间的关系：

嵌套关系
并列关系

常用元素

文本相关元素

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

超文本相关元素

超越普通文本, 如多媒体:
1. 图片(img 元素)
  <img src="文件路径/文件名.后缀名" />
2. 音频(audio 元素)
3. 视频(video 元素)
超链接, a.
<a href="统一资源定位符(URL)">文本</a>
URL: "protocol 😕/ hostname[:port] / path"

列表元素

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

表单元素

 <form action="url" method="get/post" name="表单名称">
  各种表单控件
</form>

input元素
<input type="属性值" value="你好">

type值	说明
text	单行输入字段
button	可点击按钮
radio	单选按钮
checkbox	复选框
hidden	隐藏的输入字段
file	输入字段和"浏览"按钮
submit	提交按钮

textarea元素
```
 <textarea>
  文本
</textarea>
```

select元素

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

示例:

label标签通过for属性与id相关联
name属性用于定义表单数据字段的名称.
只有带有name属性的表单元素的值才会被包含在提交的数据中.
对于单选按钮radio和复选框checkbox，具有相同name属性值的控件会被视为一组.
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>：表格单元格

上一篇C-文件操作相关例题

下一篇CSS-选择器与属性

本文作者：Khru

本文链接：https://www.cnblogs.com/khrushchefox/p/18473232

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

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

khrushchefox

HTML-元素

HTML

结构

元素

常用元素

文本相关元素

超文本相关元素

列表元素

表单元素

表格元素

公告

常用链接

我的标签

随笔分类 (117)

随笔档案 (118)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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

	<form action="url" method="get/post" name="表单名称">
	各种表单控件
	</form>

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

	<textarea>
	文本
	</textarea>