
HTML 基础
HTML :Hypertext Markup Language,超文本标记语言
- -用于描述网页信息的内容和结构
- -用开始和结构标签包围文本内容
- -把每个标签的名字称为元素
语法
<元素>内容</元素>
例如:
<p>This is a paragraph</p>
注意HTML语言中的空格会被折叠成一个空格,
使用多个空格空格使用:
在HTML多的代码中,注释代码不可嵌套使用
<!--注释内容,不可嵌套使用-->
在Pycharm新建一个HTML文件,内容呈现如下:
<!--文档类型定义,HTML5使用-->
<!DOCTYPE html>
<!--此为打开HTML标签-->
<html lang="en">
<!--head包含网页标题,CSS,JavaScript-->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--body显示网页的主体内容部分-->
<body>
</body>
</html>
测试代码:可自己建立,自行练习:
<!--文档类型定义,HTML5使用-->
<!DOCTYPE html>
<!--此为打开HTML标签-->
<html lang="en">
<!--head包含网页标题,CSS,JavaScript-->
<head>
<meta charset="UTF-8">
<title>Foryouos</title>
</head>
<!--body显示网页的主体内容部分-->
<body>
<h1>通过wordpress搭建个人网站</h1>
<p>已经完成任务</p>
<h6>7天内学完成web编程基础</h6>
<p>更新七天微信公众号,加油</p>
</body>
</html>
图中的body内的代码,即使不放在body内部仍然能够呈现出来具体的内容。—-浏览器有容错机制吗????
块元素和行内元素
- 块元素包含整个大区域的内容
- –段落,列表,表中的单元格
- –为了分隔,浏览器在不同快元素之间加入空白边缘
行内元素影响少量的内容
- –粗字文本,代码段,图像
- –浏览器允许很多行内元素出现在同一行
- –行内元素必须嵌套在块元素内
块元素
段落:(p):块元素,放置在页面的body标签内标题(h1-h6):h1-h6:字体越来越细,越来越小水平线(hr):仅单次使用
<!--水平线举例,前后省略部分,hr水平线仅一部分-->
<h1>通过wordpress搭建个人网站</h1>
<hr/>
<p>段内容</p>
行内元素:
–图像(img) –向页面中插入图片
<img src="https://r.photo.store.qq.com/psc?/V51tNpWb2FonU036uaZ52J0vZx28zxke/45NBuzDIW489QBoVep5mcQQ8B2GwmmqBm9AfQE9EHktdFe3YbQNRvB9azKtlysus8CRJrosgoE7BeGBId.W9I0lMGiHNCrLgxPeXBp22zss!/r" alt="蒋方舟"/>
<img src="https://r.photo.store.qq.com/psc?/V51tNpWb2FonU036uaZ52J0vZx28zxke/45NBuzDIW489QBoVep5mcQQ8B2GwmmqBm9AfQE9EHktdFe3YbQNRvB9azKtlysus8CRJrosgoE7BeGBId.W9I0lMGiHNCrLgxPeXBp22zss!/r" height="120"/>
src属性指出图片的URL
HTML5中也需要alt属性来描述图片
height 图片的高度,仅高度时,按照图片比例进行缩放注意相对路径
(省略网站的url,图片来自本地)绝对路径
链接(a)
<a href="https://www.foryouos.com">foryouos</a>
–链接到其它页面或锚点(标签)
–行内元素,必须置于块元素中
–用href属性指定目标URL,可以是绝对或相对URL–换行(br)
<p>已经<br/>完成任务</p>
<h6>7天内学完成<br/>web编程基础</h6>
强调(em,strong)
- em:倾斜强调
- strong:加粗强调
注意标签的匹配:一个结束标记必须匹配最近打开的标签,浏览器可以正确显示内容,但它是无效的HTML
无序列表
–无序列表<ul>,<li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>php</li>
</ul>
-ul代表一个项目无序列表(块元素)
–li代表一个项目无序列表的项(块元素)
有序列表<ol>
–ol代表一个项目编号列表(1,2,3…….),
字母等其它需要通过css
<ol>
<li>HTML</li>
<li>CSS</li>
<li>php</li>
</ol>
–定义列表<dl><dt><dd>
- dl 表示列表术语的定义
- dt 表示每个术语
- dd 对应的术语描述
<dl>
<dt>第一天</dt>
<dd>学习HTML</dd>
<dt>第二天</dt>
<dd>学习css</dd>
</dl>
表格和其它元素
表格其它元素-引用
–快引用
–行内引用-字符实体引用
-预格式化文本
–code
–pre-音频
-视频
表格
<table>
<caption>成绩表</caption>
<tr><th>学号</th><th>姓名</th><th>成绩</th></tr>
<tr><td>1001</td><td>乔丹</td><td>83</td></tr>
<tr><td>1002</td><td>贝利</td><td>79</td></tr>
<tr><td>1003</td><td>郎平</td><td>88</td></tr>
</table>
- –table :表格
- –caption :表标题
- –tr:行
- –td:单元格
- –th:列标题
表格经常用来定位
属性 | 值 | 描述 |
align | left center right | 规定表格相对周围元素的对齐方式 |
bgcolor | rgb(x,x,x) #xxxxxx colorname | 规定表格的背景颜色 |
border | pixels | 规定表格边框的宽度 |
cellpadding | pixels % | 规定单元格之间的空白 |
width | % pixels | 规定单元格之间的空白 |
colspan 跨列居中
<table border="1" align="center">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
rowspan 跨行居中
<h4>横跨两行的单元格</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
呈现效果
长引用<blockquote>
块元素,会在左右两边进行缩进
<p>春潮:</p>
<blockquote>
<p>
我对未来没有幻想,我在这里出生,也终将在这里死去。
</p>
</blockquote>
行内引用<q>
<p>Quoth the raven,<q>Nevermore.</q></q>
- -带有音节或其它装饰的字幕
- -标点符号
- -货币符号
- -数字符号
- -形状和箭头
- -部分实体HTML字符需要html代码
两种方式表示符号实体
-用实体名 &实体名-实体数字&#实体数
Character | Description | Entity Name/# |
& | Ampersand | & |
< | Less-than | &It |
> | Greater-than | 7gt |
“ | Quotation mark | " |
© 版权符号 | Copyright mark | © |
。 | Degree | &#deg |
Non-breaking space | 7#deg | |
♥ | Heart | 7#heart |
预格式化文本
–计算机代码code
- -行内元素
- -表示计算机代码
- -浏览器对其进行等宽显示
<p>
The <code>ul</code> and <code>ol</code>
tags make lists
</p>
预格式化文本–pre
- pre属于块元素,适合显示大片的按原格式输出的内容
- 精确地显示文本中的空格和换行
- 默认情况下,用固定宽度字体显示
<pre>
Bill Gates speaks
You will be assimilated
Microsoft fans delirious
</pre>
音频标签audio
<audio src="">音频元素</audio>
html5元素
播放格式包括:MP3,WAV等
属性 | 值 | 描述 |
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放 |
controls | controls | 如果出现该属性,则向用户显示空间,比如播放按钮 |
loop | loop | 如果出现该属性,则当媒介文件完全播放后再次开始播放 |
muted | muted | 规定音频输出应该被静音 |
src | url | yao播放的音频的url |
<audio src="https://m10.music.126.net/20200808230608/14372f9c169a8af1d1221739eb021e8b/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/3515641934/8eec/84e6/30c3/b148231bb2b6d89e94e936cc4caa7aad.mp3" autoplay>离你那么近</audio>
视频
格式:
<video src="">文字部分</video>
属性 | 值 | 描述 |
autoplay | autoplay | 视频就绪,立即播放 |
controls | controls | 向用户显示播放控件,播放按钮 |
height | pixels | 设置视频播放器的高度 |
loop | loop | 当媒介文件完成后再次播放 |
muted | muted | 规定视频的音频输出应该被静音 |
poster | URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像 |
preload | preload | 视频在页面加载时进行加载,并准备播放,如果使用autoplay则忽略该属性 |
src | url | 播放视频的url |
width | pixels | 视频播放器的宽度 |
<h1 align="center">妙先生在线播放,url过期啦</h1>
<video src="https://113.96.232.192/1596898074507.mp4?ver=6010&rkey=6f0438ff0B1D616D855EE36dA46eEB3Bb4998668B3B2274077a9849bf01747AA59439693c1D2151072af185ABd6a452d2897842bA29C65e480B4BDA8e7e56cdb" controls height="600" width="1300">妙先生播放</video>
HTMl常见属性
属性 | 值 | 描述 |
class | classname | 规定元素的类名 |
id | id | 规定元素的唯一id |
style | style_definition | 规定元素的行内样式 |
title | text | 规定元素的额外信息 |