复习HTML基础标签

学习目标:

  • 回顾HTML基础标签元素
  • 熟练掌握应用HTML标签

学习内容:

HTML基础标签

//HTML框架(HTML标签对大小写不敏感,但最好用小写)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<body>
		<p>段落</p>
	</body>
</html>

//标题
<h1></h1>
....
<h6></h6>
//段落
<p></p>
//超链接
<a href="www.professional.com" target="_blank"></a><!--在新窗口打开页面-->
//图像
<img src="1.png" width=" " height=" " alt=" "/>
//HTML标签常用属性

 - class:为HTML元素定义一个或多个类名
 - id:定义元素唯一的id
 - style:规定行内样式
 - title:描述元素的额外信息(作为工具条使用)
//分割内容 创建水平线
<hr>
//注释
<!--这是一个注释-->
//换行
<br>
//强调文本
<em></em>
//文本加粗
<b></b>
<strong></strong>
//斜体文本
<i></i>
//代码
<code></code>
//计算机样本
<samp></samp>
//键盘输入
<kbd></kbd>
//变量
<var></var>
//上标
<sup></sup>
//下标
<sub></sub>
//预格式文本
<pre></pre><!--可直接使用空格和换行-->
//地址
<address></address>
//文本缩写
<abbr title="etcetera">etc.</abbr><!--文字缩写-->
<acronym title="World Wide Web">WWW</acronym><!--首字母缩写-->
//文字方向
<bdo dir="rtl/ltr"></bdo><!--rtl:从右到左 ltr:从左到右-->
//短块引用
<q cite="www.baidu.com"></q>
//长块引用
<blockquote cite="www.baidu.com"></blockquote>
//删除字和插入字
<del></del><!--删除字-->
<ins></ins><!--插入字-->
//定义小号字
<small></small>
//定义作品标题
<cite></cite>
//定义项目
<dfn></dfn>
//定义本页面所有链接的默认URL
<base href=" " target="_blank">
//定义文档与外部资源的关系<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
//元数据描述
<!--为搜索引擎定义关键词-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!--为网页定义描述内容-->
<meta name="description" content="免费 Web & 编程 教程">
<!--定义网页作者-->
<meta name="author" content="Runoob">
<!--每30秒钟刷新当前页面-->
<meta http-equiv="refresh" content="30">
//加载样式<!--内联样式表-->
<style type="text/css"></style>
//加载脚本
<script></script>
//创建带有可点击区域的图像映射
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
//表格示例
<table border="1"><!--定义表格-->
  <colgroup><!--定义表格列的组-->
    <col span="2" style="background-color:red"><!--定义表格列的属性-->
    <col style="background-color:yellow">
  </colgroup>
  <tr><!--定于表格的行-->
    <th>ISBN</th><!--定义表格的表头-->
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td><!--定义表格单元-->
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>
//列表示例
<!--无序列表-->
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!--有序列表-->
<ol start="" type=""><!--start可定义开始序号 type定义序号类型:a A Ⅰ i-->
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
//块级元素
<div></div><!--常用作容器,内容布局-->
//内联元素
<span></span><!--常用作文本容器-->
//创建表单
<form>
  <label><!--一般用于标注,方便聚焦表单-->
	<input type=" " name=""><!--type:text password radio checkbox submit-->
  </label>
</form>
//定义文本域
<textarea></textarea>
//对表单中的相关元素进行分组
<fieldset></fieldset><!--会在表单元素周围绘制边框-->
//为fieldset元素定义标题
<legend></legend><!--一般和fieldset标签配合使用-->
//创建下拉列表
<select>
  <optgroup label="Swedish Cars"><!--定义选项组-->
    <option value="volvo">Volvo</option><!--定义选项-->
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
//按钮
<button></button>
//创建一个预先定义的输入控件选项列表
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
//定于一个内联框架
<iframe></iframe>
//HTML字符实体

 - 空格 &nbsp;
 - < &lt;;
 - > &gt;
 - & &amp;
 - " &quot;
 - ' &apos;
 - £ &pound;
 - ¥ &yen;
 - € &euro;
 - © &copy;
 - ® &reg;
 - ™ &trade;
 - × &times;
 - ÷ &divide;


学习时间:

  • 2022/12/30 9:00——11:00

学习产出:

  • 技术笔记 1 遍
  • CSDN 技术博客 1 篇

猜你喜欢

转载自blog.csdn.net/pipihan21/article/details/128490433