HTML 基础

HTML ：Hypertext Markup Language,超文本标记语言

-用于描述网页信息的内容和结构
-用开始和结构标签包围文本内容
-把每个标签的名字称为元素

语法

<元素>内容</元素>

例如：

<p>This is a paragraph</p>

注意HTML语言中的空格会被折叠成一个空格，
使用多个空格空格使用：

&nbsp;

在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	&amp
<	Less-than	&It
>	Greater-than	7gt
“	Quotation mark	&quot
© 版权符号	Copyright mark	&copy
。	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	规定元素的额外信息

htnl属性

Foryouos

HTML 基础

语法

块元素和行内元素

块元素

行内元素：

链接（a）

强调（em,strong）

无序列表

有序列表<ol>

表格和其它元素

表格

colspan 跨列居中

rowspan 跨行居中

长引用<blockquote>

行内引用<q>

预格式化文本

预格式化文本–pre

音频标签audio

视频

HTMl常见属性

作者

JavaScript的DOM对象

JavaScipt基础

CSS基础教学

通过wordpress搭建个人网站

发表评论取消回复

通过wordpress搭建个人网站

CSS基础教学

语法

块元素和行内元素

块元素

行内元素：

链接（a）

强调（em,strong）

无序列表

有序列表<ol>

表格和其它元素

表格

colspan 跨列居中

rowspan 跨行居中

长引用<blockquote>

行内引用<q>

预格式化文本

预格式化文本–pre

音频标签audio

视频

HTMl常见属性

作者

相关文章

发表评论 取消回复

通过wordpress搭建个人网站

CSS基础教学

发表评论取消回复