1.html基本的标签
| h1~h6 | 标题标签,依次递减 | |||
| p | 段落 | |||
| <br/> 自闭合 | 换行 | |||
| 文本标签 | strong | 加粗 | ||
| b | 加粗 | |||
| i | 斜体 | |||
| em | 斜体 | |||
| cite | 斜体 | |||
| sup | 上标 | |||
| sub | 下标 | |||
| s | 删除线 | |||
| u | 下划线 | |||
| big | 大号字 | |||
| small | 小号字 | |||
| <hr /> 自闭合 | 水平分割线 | |||
| div | 分区 | |||
| 自闭合标签 以及上面的<hr /><br/> | <meta/> | 定义网页信息 | ||
| <link/> | 引入外部css文件 | |||
| <img/> | 图片 | |||
| <input/> | 表单 | |||
| 特殊符号 |  ； | 这不是标签 空格 一个汉字约等于三个 | ||
| ol | li | 有序列表/列表项 | ||
| ul | li | 无序列表 | ||
| dl | dt/dd | 定义列表 | ||
| table | table | 表格 | ||
| tr | 行 | |||
| td | 单元格 | |||
| caption | 标题 | |||
| th | 表头 | |||
| tbody | 表身 | |||
| tfoot | 表脚 | |||
| table | 属性 | rowspan/colspan | 合并行/列 | |
| img图片 | 属性 | src | 路径 | |
| alt | 描述,无法显示时,页面会显示里面的文字 | |||
| title | 描述,当鼠标指针移动到图片上时显示 | |||
1.1.块元素和行内元素的区别
| 块元素(block) | 行内元素(inline) | |
| 示例 | p、hr、div、h1-h6、ol、ul | strong、em、a、span |
| 特点 | 独占一行，排斥其他元素与其位于同一行 内部可以容纳其他的块元素或者行内元素 | 可以和其他行内元素位于同一行 内部可以容纳其他行内元素，但不能容纳块元素 |
1.2.网页内的特殊符号
| 特殊符号 | 代码 | 说明 |
| 空格 | | 一个汉字约等于三个 |
| " | " | 双引号(英文) |
| ' | ‘ | 左单引号 |
| ' | ’ | 右单引号 |
| × | × | 乘号 |
| ÷ | ÷ | 除号 |
| > | > | 大于 |
| < | < | 小于 |
| & | & | 与号 |
| —— | — | 长破折号 |
| | | | | 竖线 |
1.3.网页内的特殊符号(难于输入的)
| 特殊符号 | 说明 | 代码 |
| § | 分节符 | § |
| © | 版权符 | © |
| ® | 注册商标 | ® |
| ™ | 商标 | ™ |
| € | 欧元 | € |
| £ | 英镑 | £ |
| ¥ | 人民币 | ¥ |
| ° | 度 | ° |
本节练习代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习网页</title>
</head>
<body>
<h1>这是一个h1标签</h1>
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<h4>这是一个h4标签</h4>
<h5>这是一个h5标签</h5>
<h6>这是一个h6标签</h6>
<hr >
<p>这是一个段落标签<br>
<strong>`HBuilderX`(加粗)</strong>，H是HTML的首字母，<em>Builder(斜体)</em>是构造者，<br>X是HBuilder的下一代版本。我们也简称`HX`。
<b><i>`HX`(斜体加粗)</i></b>是**轻如编辑器、强如IDE**的合体版本。<br>
<br>下面是一个上标和下标的练习<br>
a<sup>2</sup> + b<sup>2</sup> + 2ab = (a+b)<sup>2</sup><br>
a = [1,2,3]中a<sub>0</sub> = 1,a<sub>1</sub> = 2,a<sub>2</sub>=3
</p>
<hr >
<div id="#">
div是一个容器
原价<s>999(删除线)</s>
现价只要<b><u>199下划线</u></b>
</div>
<hr >
<div> HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
</div>
<hr >
<p>
这是一个破折号—<<br>
这是一个竖线符号 |<<br>
这是一个除号÷<<br>
这是一个乘号×代码方式<<br>
这是一个×(一个字符)<<br>
这是一个与符号&<<br>
</p>
<hr >&
<p>难于输入的html符号<br />
§分节符<br />
©版权符<br />
®注册商标<br />
™商标<br />
€欧元<br />
£英镑<br/>
¥日元<br />
°度<br />
</p>
</body>
</html>
2.列表
2.1 ol的type属性的取值
| 属性值 | 列表项符号 |
| 1 | 阿拉伯数字(默认值) |
| a | 小写英文字母 |
| A | 大写英文字母 |
| i | 小写罗马数字 |
| I | 大写罗马数字 |
2.2 ul的type属性的取值
| 属性值 | 列表项符号 |
| disc | 实心圆(默认值) |
| circle | 空心圆 |
| square | 正方形 |
列表代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表练习</title>
</head>
<body>
<h3>html列表共有三种</h3>
<div id="#">
这是一个无序列表
</div>
<ul>
<li>有序列表</li>
<li>无序列表</li>
<li>定义列表</li>
</ul>
<hr >
<div id="#">
这是一个有序列表
</div>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>JQuery</li>
<li>Bootstrap</li>
<li>Vue.js</li>
</ol>
<hr >
<p>列表的type属性</p>
<!--语法 -->
<!-- <ol type = "属性值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol> -->
<ol type="A">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<hr >
<ol type="i">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<h5>注意:ul/ol必须和li配合使用</h5>
<hr >
<p>ul的type属性</p>
<ul type="disc">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<hr >
<ul type="square">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</ul>
<h5>注意:</h5>
<p>ul中只能放li子标签</p>
<p>ul中的文本只能放在li子标签中</p>
<hr >
<p>定义列表</p>
<!-- 语法 -->
<!-- <dl>
<dt>名词</dt>
<dd>描述</dd>
...
</dl> -->
<dl>
<dt>HTML</dt>
<dd>制作网页的标准语言,控制网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表,控制网页的样式</dd>
<dt>Javascript</dt>
<dd>脚本语言,控制网页的行为</dd>
</dl>
</body>
</html>
示例:问卷调查
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>问卷调查</h1>
<h3>1、你是通过什么途径来到绿叶学习网的？</h3>
<ol type='A'>
<li>百度搜索</li>
<li>谷歌搜索</li>
<li>其他途径</li>
</ol>
<h3>2、你觉得绿叶学习网页设计怎么样？</h3>
<ol type='A'>
<li>酷炫大方</li>
<li>比较一般</li>
<li>非常粗糙</li>
</ol>
<h3>3、你举得这本书怎么样？（多选）</h3>
<ul>
<li>通俗易懂，轻松幽默</li>
<li>内容丰富，技巧贼多</li>
<li>三个字：很垃圾</li>
</ul>
</body>
</html>3.表格
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格练习</title>
<!-- <style type="text/css">
table,th,tr,td{border: 1xp solid silver;}
</style> -->
</head>
<body>
<h3>语法</h3>
<!-- <table border="1px" cellspacing="1" cellpadding="1">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table> -->
<table border="1px" cellspacing="1" cellpadding="1" >
<caption><b>前端技术</b></caption>
<tr>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<td>Javascript</td>
<td>JQuery</td>
</tr>
<tr>
<td>Vue.js</td>
<td>bootstrap</td>
</tr>
</table>
<hr >
<table border="1px" cellspacing="1" cellpadding="1">
<caption>学生成绩表</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>小红</td>
<td>88</td>
<td>67</td>
<td>98</td>
</tr>
<tr>
<td>小强</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>小紫</td>
<td>98</td>
<td>57</td>
<td>78</td>
</tr>
</table>
<h5>注意:</h5>
<p>一个完整的表格结构包括table、caption、th、tr、td</p>
<p>为进一步对表格进行语义化，HTML还引入了thead、tbody、tfoot</p>
<hr >
<h6>示例:</h6>
<table border="" cellspacing="" cellpadding="">
<caption>表格标题</caption>
<!-- 表头 -->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<tbody>
<tr>
<td>表行1单元格1</td>
<td>表行1单元格2</td>
<!-- 多出的部分怎么显示 -->
<td>表行1单元格3</td>
</tr>
<tr>
<td>表行2单元格1</td>
<td>表行2单元格2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾单元格1</td>
<td>表尾单元格2</td>
</tr>
</tfoot>
</table>
<hr >
<h5>合并行</h5>
<p>在td添加属性rowspan = '数字'</p>
<table border="" cellspacing="" cellpadding="">
<tr>
<td>姓名</td>
<td>小明</td>
</tr>
<tr>
<td rowspan="2">喜欢的水果</td>
<td >苹果</td>
</tr>
<tr>
<td >香蕉</td>
</tr>
</table>
<hr >
<h5>合并列</h5>
<p>在td添加属性colspan = '数字'</p>
<table border="" cellspacing="" cellpadding="">
<tr>
<td colspan="2">前端开发技术</td>
</tr>
<tr>
<td >HTML</td>
<td >CSS</td>
</tr>
<tr>
<td >JQuery</td>
<td >Javascript</td>
</tr>
</table>
</body>
</html>作业练习
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格作业</title>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<caption>学生成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>250</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>520</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td colspan="2">385</td>
</tr>
</tfoot>
</table>
</body>
</html>
4.图片
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片</title>
<h3>语法</h3>
<!-- <img src="路径" alt="无法显示" title="鼠标指向"> -->
<!-- 网络图片 -->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fd.lanrentuku.com%2Fdown%2Fpng%2F1102%2Fhtml_php_js%2Fpage_html_512.png&refer=http%3A%2F%2Fd.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640158320&t=b527b56b1cef662fffad93d498fcff29" >
<!-- 本地图片/绝对路径 -->
<img src="C:\Users\A1\Desktop\桌面清理\25.jpg" >
<!-- 本地图片/相对路径 -->
<img src=".\111.jpg" >
<!-- 本地图片/相对路径,和上面的写法效果一样 -->
<img src="111.jpg" >
<!-- alt 和 title属性 -->
<img src="111.jpg" alt = '图片走丢了' title="流畅的python">
</head>
<body>
</body>
</html>
5.超链接
<a href = '链接地址'>文本或图片</a>
用图片作为超链接的方法
<a href = 'https://blog.csdn.net/weixin_30263073/article/details/97508102'>
<img src="img/111.jpg" alt = '图片不见了' title="fluent python">
</a>
用a嵌套一个img标签
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!-- 这里herf=的连接地址必须写全http:// -->
<!-- 文本连接 -->
<a href="http://www.baidu.com">百度一下</a>
<!-- 图片连接 -->
<a href = 'https://blog.csdn.net/weixin_30263073/article/details/97508102'>
<img src="img/111.jpg" alt = '图片不见了' title="fluent python">
</a>
</body>
</html>5.1 target属性
| 属性值 | 说明 |
| _self | 在原来的窗开打开超链接(默认值) |
| _blank | 在新窗口打开 |
| _parent | 在父窗口打开 |
| _top | 在顶层窗口打开 |
5.2 内部链接
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page1</title>
</head>
<body>
<!-- 内部连接 -->
<a href='.\test/page2.html' target = _blank>跳转到页面2
</a>
<a href='page3.html' target = _blank>跳转到页面3
</a>
</body>
</html>
5.3 锚点链接
href = '#目标元素的id' 被链接的元素必须设置id
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锚点链接</title>
</head>
<body>
<div >
<a href='#article'>推荐文章</a>
<a href='#music'>推荐音乐</a>
<a href='#movie'>推荐电影</a>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>詹姆斯格蕾克《信息简史》</li>
<li>道金斯《自私的基因》</li>
<li>罗伯特波西格《禅与摩托车维修艺术》</li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="music">
<h2>推荐音乐</h2>
<ul>
<li>Buckethead《ghost》</li>
<li>白水《冬》</li>
<li>张浅潜《罐头》</li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="movie">
<h2>推荐电影</h2>
<ul>
<li>《无耻混蛋》</li>
<li>《流氓》</li>
<li>《梦之安魂曲》</li>
</ul>
</div>
</body>
</html>
扫一扫
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
