写点什么

HTML

作者:武师叔
  • 2022 年 8 月 17 日
    辽宁
  • 本文字数:1540 字

    阅读完需:约 5 分钟

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>
复制代码

页面内容 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>Copy to clipboardErrorCopied
复制代码


发布于: 刚刚阅读数: 3
用户头像

武师叔

关注

每天丰富自己,去过自己想要的生活! 2022.04.28 加入

一个喜欢最新技术,研发的人工智能专业的大二学生,用自己的代码做一些有意义的事情! 目前大二结束有去大厂研发岗实习的计划,每天丰富自己的技术,去过自己想要的实习生活。

评论

发布
暂无评论
HTML_8月月更_武师叔_InfoQ写作社区