前端:HTML

举报
幼儿园老大* 发表于 2024/07/01 12:29:06 2024/07/01
【摘要】 HTML定义页面元素。浏览器加载 html 文件后,会将其解析为树形结构 DOM :每个 html 标签和属性都作为一个 DOM 树节点。在全部代码(包含引入文件)解析完成后,将 DOM 树绘制并渲染为用户可见的页面。html 页面根标签解释<!DOCTYPE html><html> <!--your code--></html>Copy to clipboardErrorCopied...

HTML

定义页面元素。浏览器加载 html 文件后,会将其解析为树形结构 DOM :每个 html 标签和属性都作为一个 DOM 树节点。在全部代码(包含引入文件)解析完成后,将 DOM 树绘制并渲染为用户可见的页面。


html 页面根标签

解释


<!DOCTYPE html>
<html>
    <!--your code-->
</html>Copy to clipboardErrorCopied

head 页面头部

title 页面标题

<title>页面标题</title>Copy to clipboardErrorCopied

meta 页面元数据

页面作者 / 页面描述

<meta name="author" content="MrJoker">
<meta name="description" content="这是你的页面。">Copy to clipboardErrorCopied

页面类型 / 页面编码

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Copy to clipboardErrorCopied
  • http-equiv:元数据在 response 头部返回浏览器

link 外部资源链接

引入 网页图标 / CSS

<link href="/favicon.ico" rel="icon" type="image/x-icon" />
<link href="asserts/css/bootstrap.min.css" rel="stylesheet" type="text/css" />Copy to clipboardErrorCopied

style 页面样式

解释


<style type="text/css">
    body {background-color:yellow}
    p {color:blue}
</style>Copy to clipboardErrorCopied

script 执行脚本

  • 引入外部脚本文件
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">Copy to clipboardErrorCopied
  • 自定义脚本
<script type="text/javascript">
  document.getElementById("demo").innerHTML = "My first JavaScript";
</script>Copy to clipboardErrorCopied

页面内容 body

div / span 区域

  • <div> 为块状元素:独占一行
  • <span> 为内联元素:和其他内联元素共享一行

h1 - h6 标题

<h1>Chapter 1</h1>

p 文本

<p>This is my first paragraph.</p>

a 超链接

<p href="www.baidu.com">This is my second paragraph.</p>

  • href:跳转网址

img 图片

<img src="boat.gif" alt="Big Boat" />

  • src:图片地址
  • alt:图片不能加载时的替代文本

table 表格

  • 每个单元项表示为<tr>
  • 每个单元格表示为<td> ,标题单元格表示为<th>
解释


<table>
  <tr>
    <th>学号</th>
    <th>姓名</th>
  </tr>
  <tr>
    <td>0021</td>
    <td>陈柏言</td>
  </tr>
  <tr>
    <td>0022</td>
    <td>邓怀瑾</td>
  </tr>
</table>Copy to clipboardErrorCopied

form 表单

解释


<form action="action_page.php" method="GET">
  Name:
  <input type="text" name="name" value="Input your nane">
  <br/>
  Sex:
  <input type="radio" name="sex" value="male" checked>Male
  <input type="radio" name="sex" value="female">Female
  <br/>
  <input type="submit" value="Submit">
</form> Copy to clipboardErrorCopied
  • action:请求发送地址(URL)
  • method:请求类型

提交按钮

<input type="submit" value="Submit">

输入类型

  • 输入框
解释


Username:
<input type="text" name="name" value="MrJoker">
<br/>
Password:
<input type="password" name="password">  Copy to clipboardErrorCopied
  • 选择框
解释


Sex:
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
<br/>
Vehicle:
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a carCopy to clipboardErrorCopied
  • 下拉菜单
解释


Your Car:
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>Copy to clipboardErrorCopied
  • 文本域
<textarea name="message" rows="10" cols="30">Descript your car here.</textarea>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。