html特色图片

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:列标题

表格经常用来定位

属性描述
alignleft
center
right
规定表格相对周围元素的对齐方式
bgcolorrgb(x,x,x)
#xxxxxx
colorname
规定表格的背景颜色
borderpixels规定表格边框的宽度
cellpaddingpixels
%
规定单元格之间的空白
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代码

两种方式表示符号实体
-用实体名 &实体名-实体数字&#实体数

CharacterDescriptionEntity Name/#
&Ampersand&amp
<Less-than&It
>Greater-than7gt
Quotation mark&quot
©     版权符号Copyright mark&copy
Degree&#deg
Non-breaking space7#deg
Heart7#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等

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放
controlscontrols如果出现该属性,则向用户显示空间,比如播放按钮
looploop如果出现该属性,则当媒介文件完全播放后再次开始播放
mutedmuted规定音频输出应该被静音
srcurlyao播放的音频的url
音频播放苏醒
<audio src="https://m10.music.126.net/20200808230608/14372f9c169a8af1d1221739eb021e8b/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/3515641934/8eec/84e6/30c3/b148231bb2b6d89e94e936cc4caa7aad.mp3" autoplay>离你那么近</audio>

视频

格式:

<video src="">文字部分</video>
属性描述
autoplayautoplay视频就绪,立即播放
controlscontrols向用户显示播放控件,播放按钮
heightpixels设置视频播放器的高度
looploop当媒介文件完成后再次播放
mutedmuted规定视频的音频输出应该被静音
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像
preloadpreload视频在页面加载时进行加载,并准备播放,如果使用autoplay则忽略该属性
srcurl播放视频的url
widthpixels视频播放器的宽度
视频播放属性
 <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常见属性

属性描述
classclassname规定元素的类名
idid规定元素的唯一id
stylestyle_definition规定元素的行内样式
titletext规定元素的额外信息
htnl属性

发表评论

电子邮件地址不会被公开。 必填项已用*标注

CSS基础教学

2020-08-26

©2020 Foryouos All rights reserved.    |   豫ICP备20023651号    |   隐私政策            |   豫公网安备 41022202000044号