尚硅谷html5+css3(1)

1.基本标签:

<h1>最大的标题字号

<h2>二号标题字号

<p>换行

2.根标签<html>

包括<head>和<body>

<html>
    <head>
        <title>
            title
        </title>
        <body>
            body
        </body>
    </head>
</html>

3.自结束标签与注释(注释不可嵌套)

<html>
    <head>
        <title>
            网页
        </title>
        <body> 
           自结束标签:
           <img>
           <img/>
           <input>
           <input/>
           <!-- 注释:-->
        </body>
    </head>
</html>

4.标签的属性:

<html>
<head>
    <title>
        标签的属性
    </title>
</head>
<body>
    <!-- 属性font,在标签(开始标签或自结束标签)中设置属性
        属性是一个名值对结构
        属性用来设置标签中的内容如何显示
        属性和标签名或其他属性用"空格"隔开
        属性名和属性值不能瞎写--color,red,应该根据规定写
        有些属性有属性值,有些没有。
        若有属性值,则用引号引起来
    -->
    <h1> 第 <font color="red" size="4">1</font> 个网页
    </h1>
</body>
</html>

5.文档属性:告诉网页是html5的

<!-- 文档声明:doctype
        -告诉浏览器当前网页版本
        -html5的文档声明(不区分大小写)
        <!doctype html>
    -->
<!doctype html>
<html>

<head>
    <title>
        网页的基本结构
    </title>

</head>
<body>
</body>
</html>

6.字符集:使用万国码:UTF-8

<!doctype html>
<html>
<head>
    <!--通过meta标签设置网页字符集,避免乱码-->
    <meta charset="utf-8">
    <title>
        网页的基本结构
    </title>
</head>
</html>

7.语义化标签(1)

①标题标签:h1~h6共6级标签

从h1到h6重要性递减

h1在网页中的重要性仅次于title标签,一般情况下一个页面只有一个h1

一般用h1~h3

②块元素:在页面中独占一行的元素称为块元素(例如h1)

③p标签:表示页面中的一个段落

③hgroup:为标题分组,可以将一组相关的标题同时放入hgroup

④em:语音语调(使字体倾斜)

⑤strong:加粗字体

⑥blockquote:引用,缩进+独占一行

⑦q:短引用,为文字加双引号

⑧br:换行

8.结构化语义标签(2)(前8个了解即可,主要使用div)

①header:网页头部

②main:网页主体(一个页面只有一个main)

③footer:网页底部

④nav:网页导航

⑤aside:和主体相关的其他内容

⑥article:表示一个独立的文章

⑦section:表示一个独立区块,上面的标签都不能表示时使用section

⑧span:行内元素,没有语义,一般用于在网页中选中文字

⑨div:没有语义,只用来表示一个区块,主要使用div来布局元素

9.块和行内

块元素(block element):在网页中一般通过块元素对页面进行布局

行内元素(inline element):包裹文字

一般在块元素中嵌套行内元素(例:<h1><em>iii</em><h1/>)

p元素中不能放任何块元素

浏览器在解析网页时,会对网页中不符合规范的内容进行修正

10.列表list

在html中创建列表:(可以嵌套)

1.无序列表:ul标签:li表示列表项

   <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

2.有序列表:ol标签:li表示列表项

    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>

 

3.定义列表:dl标签:dt表示定义的内容,dd对内容进行解释说明(交互菜单)

    <dl>
        <dt>dt</dt>
        <dd>dd1</dd>
        <dd>dd2</dd>
    </dl>

 

11.超链接

使用a标签定义超链接。超链接也是一个行内元素,在其中可以嵌套除a以外的任何元素

属性:href:指定跳转的目标路径

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

12.相对路径

.或..开头:./   ../     ./可以省略不写

./当前文件所在目录

../上一级文件目录

13.超链接

(1)新建页面

target属性,用来指定超链接打开的位置

_self默认值,在当前页面打开超链接

_blank在一个新的页面打开超链接

<a href="https://www.baidu.com/" target="_blank">baidu</a>

(2)回到顶部

将超链接的href属性设置为#,这样点击超链接后页面不会跳转,而是转到当前页面的顶部

    <a href="#">回到顶部</a>

(3)跳转到任意地方:

使用id,给每个标签设置id属性(唯一标识)

href设为"#"+"id"

    <a href="#bottom">去底部</a>
    <a id="bottom" href="#">--底部--</a>
 <a href="javascript:;">什么也不会发生</a>

..未完待续..

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/520622.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言-预定义符号

编译和链接&#xff08;基础速通版&#xff09;-CSDN博客https://blog.csdn.net/Jason_from_China/article/details/137182220 预定义符号 包含 C语⾔设置了⼀些预定义符号&#xff0c;可以直接使⽤&#xff0c;预定义符号也是在预处理期间处理的。 __FILE__ //进⾏编译的…

二叉树中所有距离为k的节点

题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 从目标节点的左孩子&#xff0c;右孩子&#xff0c;父亲节点出发去找&#xff0c;左孩子 右孩子 做法简单 &#xff0c; 主要是父亲节点 &#xff0c;因此我们需要知道每个节点的父亲节点&am…

我的C++奇迹之旅:内联函数和auto关键推导和指针空值

文章目录 &#x1f4dd;内联函数&#x1f320; 查看内联函数inline方式&#x1f309;内联函数特性&#x1f309;面试题 &#x1f320;auto关键字(C11)&#x1f320; auto的使用细则&#x1f309;auto不能推导的场景 &#x1f320;基于范围的for循环(C11)&#x1f320;范围for的…

测距神器——无影无踪的超声波!

原文来自微信公众号&#xff1a;工程师看海&#xff0c;与我联系&#xff1a;chunhou0820 看海原创视频教程&#xff1a;《运放秘籍》 大家好&#xff0c;我是工程师看海&#xff0c;原创文章欢迎点赞分享&#xff01; 1880年居里兄弟发现&#xff0c;在石英晶体的特定方向上施…

AI Agent在芯片设计领域的未来应用

文章目录 (一)首先是“AI Agent”的Agent怎么理解(二)其次是“AI Agent”的AI怎么理解1) 联邦学习/密文计算/密码学算法/MPC2) sklearn 库所有算法的MPC化实现密文计算安全改造和性能优化3 )NLP Bert 推荐召回(三)最后,“AI Agent”+芯片设计,怎么理解认识一个新概念…

解压缩软件哪个好用 Mac免费解压软件哪个好 解压软件推荐 beeterzip免费下载

解压缩软件在Mac办公中是必不可少的&#xff0c;不仅能够节省时间和内存&#xff0c;更能提升传输效率。虽然Mac自带的解压缩软件归档实用工具可以对zip文件进行解压&#xff0c;但是对于他格式文件就无能为力了。 因此&#xff0c;想要满足多类型文件解压缩需求&#xff0c;可…

基于vue+node.js导师选择分配管理系统

开发语言 node.js 框架&#xff1a;Express 前端:Vue.js 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat 开发软件&#xff1a;VScode .设计一套导师选择管理系统&#xff0c;帮助学校进行导师选择管理等繁琐又重复的工作&#xff0c;提高工作效率的同时&#xff0c…

多线程-相关概念

程序、进程与线程 程序&#xff08;program&#xff09;&#xff1a;为完成特定任务&#xff0c;用某种语言编写的一组指令的集合。即指一段静态的代码&#xff0c;静态对象。 进程&#xff08;process&#xff09;&#xff1a;程序的一次执行过程&#xff0c;或是正在内存中运…

linux文件权限与数字转化

chmod命令——change mode&#xff0c;可以对特定文件文件夹权限进行更改 这里我们看到&#xff0c;当执行了chmod u-x try.sh后&#xff0c;try文件底色变为白色&#xff0c;即为其执行权限被“减去” 在linux系统中&#xff0c;权限的减去是通过权限的数字表示来实现的&#…

【可靠性】陷阱电荷对TDDB影响的多尺度模拟

【From Accelerated to Operating Conditions: How Trapped Charge Impacts on TDDB in SiO2 and HfO2 Stacks】 文章总结&#xff1a; 本研究深入探讨了在SiO2和HfO2介质堆叠中&#xff0c;陷阱电荷对时间依赖介电击穿&#xff08;TDDB&#xff09;现象的影响。通过引入载流子…

【MySQL的详细使用教程】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

Redis高可用和持久化

一、Redis高可用 在web服务器中&#xff0c;高可用是指服务器可以正常访问的时间&#xff0c;衡量的标准是在多长时间内可以提供正常服务&#xff08;99.9%、99.99%、99.999%等等&#xff09;。 但是在Redis语境中&#xff0c;高可用的含义似乎要宽泛一些&#xff0c;除了保证提…

Pytorch转onnx

pytorch 转 onnx 模型需要函数 torch.onnx.export。 def export(model: Union[torch.nn.Module, torch.jit.ScriptModule, torch.jit.ScriptFunction],args: Union[Tuple[Any, ...], torch.Tensor],f: Union[str, io.BytesIO],export_params: bool True,verbose: bool False…

《QT实用小工具·十六》IP地址输入框控件

1、概述 源码放在文章末尾 该项目为IP地址输入框控件&#xff0c;主要包含如下功能&#xff1a; 可设置IP地址&#xff0c;自动填入框。 可清空IP地址。 支持按下小圆点自动切换。 支持退格键自动切换。 支持IP地址过滤。 可设置背景色、边框颜色、边框圆角角度。 下面…

网址打包微信小程序源码 wap转微信小程序 网站转小程序源码 网址转小程序开发

内容目录 一、详细介绍二、效果展示2.效果图展示 三、学习资料下载 一、详细介绍 我们都知道微信小程序是无法直接打开网址的。 这个小程序源码提供了一种将网址直接打包成微信小程序的方法&#xff0c; 使得用户可以在微信小程序中直接访问这些网址内容。 这个源码没有进行加…

Python3 Ubuntu

一、安装中文输入法 1.sudo apt install ibus-sunpinyin 2.点击右上角输入法&#xff0c;然后点击加号&#xff0c;输入yin添加进来&#xff0c;最后选中输入法即可 二、安装截屏软件 1.sudo apt install gnome-screenshot 三、安装opencv-python 1.pip3 install --upgrade…

第九讲 Join 算法

1. 为什么我们需要 Join 我们对关系数据库中的表【tables】进行规范化【normalize】&#xff0c;这样我们就减少了信息的冗余和浪费的空间&#xff0c;但是现在我们为了可以响应传入的查询【Query】&#xff0c;我们必须把这些分离的东西重新组合在一起&#xff0c;以重建原始…

瑞吉外卖实战学习--15、批量启售和批量禁售

批量启售和批量禁售 前言代码实现 前言 代码实现 通过url我们可以获取到传过来的ids和状态值&#xff0c;现根据状态值查询出来相关数据然后直接附加状态值最后通过updateBatchById来进行修改 PostMapping("/status/{status}")public R<String> updateStatus(…

嵌入式学习48-单片机1

51单片机—————8位单片机 裸机驱动 无系统 linux驱动 有系统 驱动-----反映硬件变化 MCU 微控器 MPU CPU GPU 图像处理 IDE 集成开发环境 peripheral 外设 SOC&#xff1a; system on chip P0&#xff1a;8bit——8个引脚 位运算 & …

彩虹聚合DNS管理系统v1.0全新发布

聚合DNS管理系统&#xff08;https://github.com/netcccyun/dnsmgr&#xff09;可以实现在一个网站内管理多个平台的域名解析&#xff0c;目前已支持的域名平台有&#xff1a;阿里云、腾讯云、华为云、西部数码、CloudFlare。本系统支持多用户&#xff0c;每个用户可分配不同的…