ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

第一周周报

2021-11-20 12:30:19  阅读：136  来源： 互联网

标签：章节 页面 第一周 元素 跳转 属性 CSS 周报


HTML与CSS

文章目录

概述

  • html是w3c组织定义的语言标准，是用于描述页面的语言。（现用HTML5）
  • CSS是w3c组织定义的语言标准，是用于描述页面的语言。（现用CSS3）

执行

  • html与CSS是用浏览器执行的。
  • 浏览器：由外壳和内核组成。
    有自己内核的浏览器：IE、FireFox、Chorme、Safan、Opera。

第一个网页

1、！+Tab：自动生成HTML的代码片段。

<!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>Document</title>
</head>
<body>
    
</body>
</html>

2、注释（为代码阅读者提供帮助，不参与运行）

<!-- （注释） -->

3、元素

1）元素=起始标记+结束标记+元素内容（要显示的东西）+元素属性

<a>
(元素内容）
</a>

<title>Document</title>

属性=属性名+属性值
分类：局部属性、全局属性。

<a href="https://www.bilibili.com" title="视频网站">哔哩哔哩</a>

2）空元素（无结束标记）
写法1

<meta charset="UTF-8">

写法2

<meta charset="UTF-8" />

4、元素的嵌套

正确写法

<div>
<p>
</p>
</div>

错误写法

<div>
<p>
</div>
<\p>

5、标准的文档结构

<!DOCTYPE html><!--文档声明，告诉浏览器当前文档使用HTML最新标准；若不写，将导致浏览器进入怪异渲染模式-->
<html lang="en"><!--根元素，一个页面最多一个并且该元素是所有其他元素的父元素或祖先元素，但在HTML5中没有强制要求-->
<head><!--文档头，文档头部的内容，不会显示到页面上-->
    <meta charset="UTF-8"><!--文档原数据，附加信息。-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--告诉浏览器如果用IE的话内核建议使用edge内核-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--适配手机端-->
    <title>Document</title><!--网页标题-->
</head>
<body><!--文档体，页面上所有要参与显示的元素都应该放置到文档体中-->
    
</body>
</html>

说明：
lang属性：language，全局属性，表示该元素内部使用的文字是使用的哪一中自然语言书写的。（简体中文：cmn-hans)
charset:指定网页内部编码。
UTF-8：网页内部编码—万国码，是uicode编码的一个版本。

语义化

1、什么是语义化

1）每一个HTML元素都有具体含义。
例如：
a：超链接
h1：一级标题
p: 段落
2）所有元素与展示效果无关。
元素展示到页面中的效果由CSS决定
浏览器带有默认的CSS样式
选择什么元素取决于内容的含义，而不是显示出的结果。

2、为什么要语义化

1）为了优化搜索引擎。
2）为了让浏览器理解网页（便于使用特殊功能）。
3）为了开发人员维护。

文本元素

1、h（h1~h6)

表示一级标题到六级标题。
h1*6>{一级标题}+Tab

    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>

2、p

段落：paragraphs
快捷方式与h相同
lorem：乱数假文(相当于填充物，可用来测试排版）
p*6>lorem+Tab

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, harum quas est accusamus iste recusandae esse, fuga suscipit ratione totam eveniet mollitia id perspiciatis eius nemo possimus incidunt. Dicta, obcaecati?</p>
    <p>Quam ipsum at, ipsa deleniti facere officiis rem nihil ea? Reiciendis, mollitia saepe assumenda quod tempore minima accusantium adipisci dolore atque dignissimos itaque ad doloremque similique. Assumenda incidunt maxime alias?</p>
    <p>Maiores iure eligendi velit quo cum asperiores, voluptatibus facere quia exercitationem amet earum, non illum accusamus expedita debitis ratione tempore rerum fuga ab illo. Cum culpa quisquam corporis quidem commodi!</p>
    <p>Libero, autem cum ducimus incidunt eum expedita unde, laudantium earum totam maxime ipsa possimus consectetur facere quam deleniti! Ex dolorem reprehenderit sit fugiat atque aliquid saepe animi ea adipisci obcaecati.</p>
    <p>Libero voluptatibus maiores itaque ea eius porro veritatis magni iste quis aut omnis saepe repudiandae, error hic fugiat modi veniam facere velit autem. Excepturi velit fugit dolorem facere iure porro.</p>
    <p>Similique, totam magnam! Perspiciatis atque soluta illo? Laudantium voluptatibus iure magnam, nisi voluptatem natus aperiam at explicabo perspiciatis minima similique tenetur sit ad harum cumque quo accusamus porro omnis esse!</p>

3、span

无语义，仅用于样式设置。
某些元素在显示时会独占一行（换行），而有的不会（span）

4、pre

预格式化文本元素。（在pre元素中的内容不会出现空白折叠）
空白折叠：在源代码中的连续空白字符在页面显示时会被折叠为一个空格。
本质：有一个默认的CSS属性
显示代码时通常外面套code元素

    <code>
        <pre>
            
        </pre>
    </code>

实体字符（HTML实体）

通常用于在页面中显示一些特殊符号。
形式：
&+单词
&+#+数字
例：
小于符号：&lt，&LT，&#x0003c
大于符号：&gt，&GT
空格符号：（输出多个空格）&nbsp
版权符号：&copy
&：&amp

a元素

1、href属性（hyper reference:表示地址跳转)

1）跳转地址（要刷新页面）
2）跳转到某个锚点（锚链接若跳转的锚点在当前页面则不刷新页面，反之要刷新）

<a href="#ch1">章节1</a><a href="#ch2">章节2</a><a href="#ch3">章节3</a><a href="#ch4">章节4</a><a href="#ch5">章节5</a><a href="#ch6">章节6</a>
    <h2 id="ch1">章节1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam ducimus quam debitis fuga ad commodi ab qui. Explicabo excepturi natus est nemo mollitia, debitis dolor, obcaecati atque labore, iusto quae?</p>
    <h2 id="ch2">章节2</h2>
    <p>Qui similique accusamus animi vitae itaque mollitia illo suscipit, fuga nihil quod doloribus totam sapiente iste natus sunt, ab cumque magnam porro est. Ab et iure rem ullam amet quos.</p>
    <h2 id="ch3">章节3</h2>
    <p>A est magnam sed earum repellendus. A, dolorem laborum voluptatem quasi quisquam mollitia iure provident cum magnam fugiat, cupiditate voluptatibus assumenda praesentium officia minus, aliquid corporis. Quibusdam fugiat sequi earum?</p>
    <h2 id="ch4">章节4</h2>
    <p>Dolore doloremque nulla debitis ab provident eos error fugiat adipisci iste commodi illum quia, natus in a! Ut tenetur quaerat nemo in excepturi omnis temporibus aut aperiam quam. Libero, praesentium?</p>
    <h2 id="ch5">章节5</h2>
    <p>Facilis quaerat quod sint, aliquam praesentium incidunt suscipit error, ipsam velit molestiae fugit adipisci repudiandae illo dolor! Est, perspiciatis dignissimos odit atque obcaecati voluptatibus eveniet modi reiciendis sint ducimus nam?</p>
    <h2 id="ch6">章节6</h2>
    <p>Repellat ullam enim eaque reiciendis architecto ducimus ratione facilis iure aut quisquam, rerum ea harum illum! Alias ullam aperiam est delectus similique, fugiat velit illum iusto a, eveniet sint facere.</p>

3)功能性链接
点击后触发某个功能。
执行JS代码（javascript:）

<a href="javascript:alert('你好')">你好</a><!--点击你好会弹出你好！-->

发送邮件（mailto:）（要求用户计算机上安装了邮件发送软件）

<a href="mailto:12345678@qq.com">发邮件给12345678@qq.com</a><!--点击发邮件给12345678@qq.com即发送-->

拨号（tel:）（要求用户计算机上安装有拨号软件或使用移动端访问）

<a href="tel:12345678910">拨号给12345678910</a><!--点击拨号给12345678910即拨号-->

2、target属性

表示窗口跳转位置。
两种取值：
1）_self:在当前页面窗口打开（默认值）。
2）_black:在新窗口中打开。

路径的写法

1、站内资源和站外资源

2、绝对路径（站外或站内），相对路径（站内）

1）（url地址）绝对路径书写方法：协议名：//主机名：端口名/路径
协议名：例：https，http,file(表示一个本地网站）
若协议是http,默认端口号80，如果协议是htpps，默认端口号443。
当跳转目标和当前页面协议相同时，可省略协议
2）相对路径
./（可省）开头，表示当前资源所在目录
…/表示返回上一级目录

图片元素

1、img元素（空元素，无结束标记）

src属性：

<img src="./(图片地址)">

alt属性：当图片资源失效时，将使用该属性的文字代替图片(如下例显示不出来的时候出现一个图标+xxxx)

<img src="./(网页地址)" alt="xxxx">

2、和a元素联用

<a href="(网页地址)">
  <img src="./    " alt="xxxx">
</a>

点击图片后会跳转到一个网页里

3、和map元素联用

<map name="SolarMap"></map>

    <img src="./    " alt="xxxx" usemap="#SolarMap">
    <map name="SolarMap">
    <area share="circle" coords="(坐标)" href="(网址)"><!--map子元素-->
    </map>

4、和figure联用

通常用于把图片（标题，描述）包起来。
子元素：figcaption（把标题或相关信息包起来）

多媒体元素

1、video元素

<video src="   "></video>

controls属性：取值只能为controls
某些属性只有两种状态：不写或取值为属性名，这称为布尔属性（在HTML5中可不写属性值）
以下属性均为布尔属性：
autoplay:自动播放
muted：静音播放
loop：循环播放

2、audio元素

使用与video一致

3、兼容性

为防止不兼容则：

   <video>
       <source src="   .mp4">
       <source src="   .webm">
   </video>

列表元素

1、有序列表

ol子元素为li:

<ol>
       <li></li>
       <li></li>
       <li></li>
   </ol>

显示出来前面有数字，只要有序就用有序列表，而不能为了显示数字而用
type属性（除非编号十分重要否则都应用CSS显示样式）：
type=“1”(用数字显示编号)
type=“i”(用小写罗马数字显示编号)
type=“I”(用小写罗马数字显示编号)
type=“a”(用小写字母显示编号)
type=“A”(用大写字母显示编号)
reversed属性：
布尔属性，倒着排序。

2、无序列表

ul子元素为li
默认内容前为·，但用CSS可以改。
常用于制作菜单或新闻列表

3、定义列表

通常用于一些术语的定义
dl：definition list
dt：definition title
dd：definition description

<dl>
       <dt>
           <dd>
               
           </dd>
       </dt>
   </dl>

标签：章节,页面,第一周,元素,跳转,属性,CSS,周报
来源： https://blog.csdn.net/qq_61601160/article/details/121430223

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有