html学习笔记_<html lang="enter the language code here"><head>-CSDN博客

本文链接：https://blog.csdn.net/liyi67/article/details/121430562

#第一周学习笔记
##11月15日
第一个自己的网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是我的的第一个网页</title>
</head>
<body>
    <a href="https://www.bilibili.com/" title="中国最好的动漫网站">哔哩哔哩</a>
    <h1 title="this is my frist page ">
        李毅的第一个网站
    </h1>
    <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.WxdSl9EFsf60fQ4_WM8PeAHaEn?w=300&h=187&c=7&r=0&o=5&dpr=2&pid=1.7">
</body>
</html>

关于一些关键东西的理解（以上代码为例）

<!DOCTYPEhtml>:
提示浏览器下面的类容用HTML5的标准渲染
<html lang="en">
告诉浏览器下面的自然语言为什么语言（英语，中文等）
<meta charset="UTF-8">
说明下面内容以什么标准来存储在计算机，这里是指uncoine 8 的标准
<meta http-equiv="X-UA-Compatible"
解决手机端的问题

关于每个元素的组成
整体 element (元素)
元素 = 起始标记 <> + 终结标记</> + 元素内容 + 元素属性
元素属性 = 属性名 + 属性值
属性：全局属性(所有元素通用属性)
局部属性(某些元素的属性)
###什么是语义化？
语义化即每个元素代表的含义。
：比如h1元素表示一级标题，p元素表示段落，每个元素所显示的东西与语义没有关系，都是按照默认的css代码显示，所有的显示都可以通过css改变，
所以不能认为，我们需要怎么样的显示才写一个什么元素。
##11月16日
###元素
文本元素 h元素 p元素 pre元素 span元素
以下一一介绍；
####h元素(标题元素)
以下为代码展示(body部分展示)

<body>    
    <h1>&标题</h1>
    <h2>&标题</h2>
    <h3>&标题</h3>
    <h4>&标题</h4>
    <h5>&标题</h5>
    <h6>&标题</h6>
</body>

下面是运行效果

&标题

(显示效果是可以修改的所以并不是说各级标题的差别是他们的显示类容)

p元素(段落元素)

代码展示

<body>    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
    <p>Quibusdam, at quisquam dolorum exercitationem consectetur magnam!</p>
    <p>Animi, tenetur dignissimos ad architecto id deleniti!</p>
</body>

展示代码效果

Lorem ipsum dolor sit amet consectetur adipisicing.

Quibusdam, at quisquam dolorum exercitationem consectetur magnam!

Animi, tenetur dignissimos ad architecto id deleniti!

####pre元素
在网页展示中会有空白折叠，即当有多个空白符号只会显示一个空白符，而pre元素可以保留元素内容中多个。
下面是代码展示

<body>    
    <pre> 我爱  messi   messi is the best player </pre>
</body>

效果展示

 我爱  messi   messi is the best play

####span元素无语义元素为了给某些东西添加特殊属性(通过css书写) 因为对css没有学习所以不展示。

块级元素与行级元素(以前的说法，在html5标准中没有这个概念)
块级元素:会独占一行
行级元素：不会独占一行
####a元素
超链接元素
href 超链接属性
#####1 通过a元素实现最简单的超链接跳转
代码实现

<body>    
    <a href="https://www.bilibili.com/">bilibili</a>

</body>

代码效果

bilibili

#####2通过超链接实现文章内跳转

<body>    
   <a href="#cp1">1章节</a> <a href="#cp2">2章节</a> <a href="#cp3">3章节</a> <a href="#cp4">4章节</a> <a href="#cp5">5章节</a> <a href="#cp6">6章节</a>
   <h2 id="cp1">1章节</h2>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sunt quidem aliquam tempora consequuntur perferendis explicabo excepturi provident nam iure? Atque perspiciatis consequuntur itaque molestiae, cupiditate laudantium amet est unde nisi cum a fuga mollitia nostrum eligendi consectetur reiciendis corporis? Dolore iste deleniti, dolores modi sint est. Voluptate, beatae esse eos incidunt eum, iusto, earum nisi sit cupiditate commodi ea! Ipsum pariatur consequuntur eos molestias accusantium, laudantium qui commodi sequi, aperiam, laboriosam asperiores rem facere doloribus sunt hic et. Molestiae iusto explicabo distinctio neque eveniet quae deleniti possimus obcaecati animi a! Quaerat repellendus recusandae ipsum, architecto officia quidem blanditiis? Labore.</p>
   <h2 id="cp2">2章节</h2>
   <p>Fugiat non aspernatur laudantium nesciunt quos alias eveniet sunt omnis minima sed iure, maxime facere, vero modi rerum expedita ab? Odit, harum totam quam vel dolor, voluptatem architecto cumque repellendus id quis dignissimos alias minima accusantium adipisci ratione culpa repudiandae maiores in pariatur expedita? Ipsam natus officiis repellendus nobis eos deleniti! Nam, laboriosam. Rem consectetur eveniet ipsum qui, sed necessitatibus! Nesciunt similique fuga dolorem dolores amet rerum dolorum exercitationem nulla, iusto voluptate odit nisi earum ut tempore eligendi sit ad quasi cumque dolore cum? Labore itaque id repellat aut distinctio pariatur? Saepe voluptates laboriosam maiores suscipit at incidunt tenetur aperiam!</p>
   <h2 id="cp3">3章节</h2>
   <p>Deleniti illum voluptatibus, ad amet cum distinctio quas nesciunt modi maxime at iste nostrum expedita soluta placeat sit iure odio fuga, odit, provident animi consectetur eveniet eos debitis dignissimos! Soluta similique, doloribus autem maiores a dolores. Pariatur libero nostrum, sit minima exercitationem, soluta, eius a corrupti porro laborum odit voluptatem molestias atque. Voluptate nesciunt ipsam ut animi cum deserunt, neque, cumque nemo similique nisi doloremque culpa magnam repudiandae est ullam tenetur at suscipit omnis architecto, delectus corrupti? Alias incidunt earum quidem, modi in odit natus, tenetur asperiores, ad minus iure. Labore quia repellendus distinctio id doloremque, explicabo earum! Rerum, nemo?</p>
   <h2 id="cp4">4章节</h2>
   <p>Quibusdam maiores ducimus iste cumque saepe facilis deserunt quisquam expedita hic eos earum, sunt non nisi harum explicabo distinctio voluptate! Eos reprehenderit cum a, fuga saepe, quia aliquam odio officiis temporibus repellat adipisci magni, quo necessitatibus odit deserunt neque fugit doloremque amet. Eveniet aspernatur architecto, minima porro, vitae fugit laudantium rem repellendus ex, modi voluptatem illum corrupti et repellat qui nesciunt harum est distinctio voluptas autem dolorum sapiente quia enim. In quas quos consectetur labore quaerat, provident, voluptatum iusto officia enim numquam, aliquid consequatur eaque exercitationem nisi. Ullam, alias perspiciatis recusandae eum ducimus nisi dolore saepe iusto enim assumenda natus?</p>
   <h2 id="cp5">5章节</h2>
   <p>Magnam, consectetur? Quae repudiandae, quos inventore eligendi quidem, sequi est reiciendis dolorum libero assumenda dicta magni provident sint modi eius impedit consectetur error deserunt repellat minima magnam nihil explicabo fuga nulla. Reiciendis architecto labore at a dolore officiis eaque autem doloribus laboriosam! Rerum est ut corporis consequuntur quod? Dolorem atque, optio ipsa quis quidem culpa nesciunt officiis voluptatum nostrum minima dolor praesentium repellendus quas quam ea. Saepe ipsa aut, ipsum omnis sequi totam quidem voluptate deleniti qui corrupti dolorem consectetur corporis nam blanditiis dolores quaerat iusto nulla exercitationem facilis quos voluptatem eligendi ad perspiciatis vel. Fuga facere fugiat repellat maxime.</p>
   <h2 id="cp6">6章节</h2>
   <p>Aliquam nihil dolor beatae ducimus, ad harum exercitationem vel minima assumenda odit obcaecati similique nemo, earum soluta, incidunt natus et facilis mollitia vero. Illo natus odio amet sequi, quod, harum optio vero ratione nam quia, aliquam perspiciatis ducimus quam autem blanditiis totam? Numquam veritatis pariatur iure accusamus minus veniam debitis. Ab est dolores, facere natus, placeat nam vero voluptate ducimus at officiis quo itaque labore? Esse ipsum in ullam totam accusantium, aliquam atque deserunt est autem saepe quos, veritatis natus facilis quidem dolorum ipsam a maiores, hic quasi vitae! Nulla hic nesciunt omnis quasi eveniet eaque ab natus reiciendis rem.</p>
</body>

该代码展示效果如果想更好，可以生成lorem1000但是如果这样会使文案张太长。
上面的代码的注意点
id是全局属性
链接有三种 1.普通链接 2.锚链接 3.功能链接(触发js代码，执行功能)
上面的链接是锚链接。
关于target属性
_blandk(在空白窗口打开)
_self(覆盖自己就在当前页面打开)

<body>
    <a href="https://www.bilibili.com/" target="_blank">bilibili</a>
    <a href="https://www.huya.com/" target="_self">虎牙</a>
</body>
代码如下

bilibili 虎牙 ###html实体字符其实很简单有一些特殊符号不能直接打印则通过该方式 &#+数字(每个字符有自己的数字 &+字母(代表该字符) ####路径的书写站内资源：相对路径站外资源: 绝对路径绝对路径的书写格式协议名://主机名:端口号/路径相对路径的书写 ./开头,./b表示当前的资源所在的目录 ./表示当前文件../表示上一级文件

##11月17号
####图片元素
ima元素
src属性；图片的地址
alt属性；当图片失效后对图片的描述
ima元素与alt元素a元素figure连用
下面是写的代码

<figure>
            <h2 title=" The best">messi</h2>
            <a  href="https://baike.baidu.com/item/%E9%87%8C%E5%A5%A5%C2%B7%E6%A2%85%E8%A5%BF/4443471" target="_blank">
                <img usemap="#me-ssi" src="https://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/fc1f4134970a304ee68964ded3c8a786c9175c6f.jpg" alt="messi">
            </a>
             <map name="me-ssi">
                <area shape="circle" coords="537,836,50" href="https://baike.baidu.com/item/%E5%AE%89%E5%BE%B7%E9%9B%B7%E6%96%AF%C2%B7%E4%BC%8A%E6%B6%85%E6%96%AF%E5%A1%94/4515309" target="_blank" >
             </map>

##11月18日
###多媒体元素
####video 视频
在该链接路径中结尾是.mp4格式

<video src=""></video>

####audio音频
该链接结尾一般书.mp3

<audio src=""></audio>

一些用于video以及audio的属性
1 controls
控制控件的显示(暂停快进等)
2 autoplay
自动播放
在一些浏览器不支持自动播放
因为会给用户造成不好的体验
3 muted
静音播放，因为一些浏览器不能支持自动播放，但是只要们静音播放就可以
4 loop
循环播放
因为一些浏览器不支持MP3,所以考虑到兼容问题我们可以在视频中加以一个子元素source
在source中在使用src，可以使用两个src一个是MP4的格式一个是media格式
###列表元素
####有序列表
ol(ordered list)
li(list item)

<body>
    <ol>
        把大象装进冰箱需要几步
        <li>
打开冰箱
        </li>
<li>
    把大象装进冰箱
</li>
<li>
    关闭冰箱
</li>
    </ol>
</body>

显示效果

把大象装进冰箱需要几步
打开冰箱
把大象装进冰箱
关闭冰箱

在ol中可以给显示的序号用type属性给他修改不同的样式如英文字母阿拉伯字母等比如将上面的修改为下面的效果，但是一般不会使用type修改样式因为所有的样式修改都是cssde工作，但是一些逻辑性强要求特别规范的还是用tyte如f法律条文

把大象装进冰箱需要几步
打开冰箱
把大象装进冰箱
关闭冰箱

####无序列表 ul ``` xxx大学的入学条件

高考500分
身体健康
尊敬师长

``` xxx大学的入学条件

高考500分
身体健康
尊敬师长

无序列表长用于菜单新闻列表 ###定义列表 dl 子元素包括dd dt ``` 越位的解释

    <dt>越位</dt>
    <dd>
        越位的通俗理解就是
        在传球的一瞬间攻方前面没有防守
    </dd>
</dl>

``` ### 容器元素该元素内部代表一个区域用来放置其他的东西 div元素(没有语义) header元素(通常表示页头，或文章的头部) footer(通常用于表示页脚，或文章的叶脚) artical(文章的正文) 在article中一般就可以用header，在header 中又可以有h1也可以用section表示一个章节就 aside 表示侧边栏在容器元素中大部分实际开发就用div就可以le ###元素的包含关系块级元素可以包括行级元素，行级元素不能包括行级元素，块级元素换行，行元素不会换行如今的包含规则需要考虑语义在使用中如果想知道直接查 a元素基本可以包括任何元素 2 容器元素可以包含所有元素 3 有些元素包括固定元素 4 标题元素和段落元素不能相互嵌套，并且不能包括容器元素