HTML-0726

企业开发 2024-11-04 21:09:07 阅读次数: 0

一、概念

网页组成部分 = 结构(html) + 表现(css) + 行为(js)

HTML(超文本标记语言)：

Hyper(超级) + Text(文本) + Markup(标记) + Language(语言)

  • 什么叫超文本标记语言？

    1、超文本：添加了超链接的文字或者图片

    2、标记语言：描述网页的一种语言

二、HTML结构

<!-- 声明（告知浏览器）文档类型为HTML -->
<!DOCTYPE html> 
<!-- 结构相关的代码会包含在该单词之间:lang = "en"代表用英文去解析(浏览器默认为此) -->
<html lang="en">
<!-- 头部（head） -->
<head>
    <!-- 设置 字符的编码格式为"UTF-8"(国际通用编码格式):其目的是为了防止乱码 -->
    <meta charset="UTF-8">
    <!-- 设置 IE相关的信息 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置 针对移动端（主要指手机端） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页的标题（！！！head部分唯一可以在浏览器中显示的部分） -->
    <title>Document</title>
</head>
<!-- 主体（body） -->
<body>
    <!-- 一般将文字和图片相关的标记语言放到这个位置 -->
    我的第一个网页<br>
    <!-- 网页的基本结构（每一个网页都会存在的最基本结构），通常用英文状态下的： "!" + 回车 -->
    HTML注释:编辑器里面可以看得见，但是在浏览器运行时不会显示，主要为了方便阅读代码
</body>
</html>

三、HTML语法

HTML基础语法:

​ 标记/标签/元素：尖括号中的第一个单词

标签分类

​ 1、双标签: 成对出现的标签，结束标签前面必须带 " / "

​ 2、单标签: 单独出现的标签，单标签后面的" / "可带可不带

​

标签里面的属性：标签后面用空格隔开的单词

​ 1、属性名和属性值用" = "连接

​ 2、属性值一般要用引号(可单可双)

​ 3、标签身上可以有多个属性,且多个属性之间没有顺序(每个属性之间用空格隔开)

四、文字类标签

1、标题标签 h （从h1 ~ h6,字体依次变小）

  • ​ 改变文字字体并加粗

  • ​ 块级元素(单独占一行)

  • ​ 双标签

2、段落标签 p

  • ​ 块级元素

  • ​ 双标签

  • ​ 不改变文字展示效果,仅仅使文字成段出现

3、水平线标签 hr 单标签

4、加粗标签：b标签和strong标签的异同:

  • 相同：

​ a、加粗效果相同

​ b、都是双标签

​ c、都是行内元素(可以在同一行显示)

  • ​ 不同：

​ 语义上: strong标签更加表示强调;但b标签只是表示加粗

5、斜体 i 和em标签的异同：

  • ​ 相同：

​ a、效果相同

​ b、都是双标签

​ c、都是行内元素(可以在同一行显示)

  • ​ 不同：

​ 语义上: em标签更加表示强调;但i标签只是表示斜体

6、下划线 u 标签和 ins 标签的异同：

  • 相同：

​ a、效果相同

​ b、都是双标签

​ c、都是行内元素(可以在同一行显示)

  • ​ 不同：

​ 语义上: ins标签更加表示强调;但u标签只是表示下划线

7、删除线(del标签)：

​ a、双标签

​ b、行内元素

8、上标标签(sup)和下标标签(sub):

​ a、双标签

​ b、行内元素

9、换行标签(br):

​ a、单标签

​ b、块级元素

五、常用特殊字符

常用字符 HTML代码表示方式(后加;)
&nbsp
< &lt
> &gt
版权商标：© &copy
注册商标：® &reg

六、图片 img 标签

特点

1、单标签
2、块级元素

属性

1、 src: 图片路径

​ a、 绝对路径: 能直接获取到线上图片地址

​ b、 相对路径

​ 1) 同级的直接：名字.后缀

​ 2) 进去文件夹的：文件名/名字.后缀

​ 3) 出文件夹的：…/名字.后缀

2、 width: 图片的宽度(宽度更改时，高度会等比缩放)

3、 height: 图片的高度(高度更改时，高度会等比缩放)

4、 title: 鼠标悬停在图片时给出的提示信息

5、 alt: 图片加载失败时给用户的提示信息

七、超链接 a 标签

特点

1、双标签

2、自带颜色和下划线

3、鼠标悬停会变手型

4、行内元素(在同一行显示)

属性

1、href: 跳转的路径

2、target: 窗口的打开方式

​ target属性值：

​ _self 当前窗口打开(默认)

​ _blank新建窗口打开

功能

  1. 跳转外部页面链接
<a href="https://image.baidu.com/" target="_blank" >百度一下，你就知道</a>
    <a href="">淘宝</a>
  1. 跳转本地页面链接
<a href="此处填写本地文件地址">点击之后，跳转到第五个文件</a>
  1. 预览图片
<a href="图片的地址">预览jk图</a>
  1. 下载文件
<a href="下载文件的地址">下载文档</a>

  1. 锚点链接

    在浏览一些网页的时候大都在网页的上方有一个固定住的导航条，上边会列出下方显示内容的版块分区。当点击导航条中的一个版块的时候他会自动的跳转到指定的版块，这是页面内部的区域跳转。

<!--为了简化代码方便阅读，div版块设置为宽度高度各为300px的不同颜色的版块-->
<p id="part1">第1章</p>
<div class="part"></div>
<p id="part2">第2章</p>
<div class="part"></div>
<p id="part3">第3章</p>
<div class="part"></div>
<p id="part4">第4章</p>
<div class="part"></div>
<p id="part5">第5章</p>
<div class="part"></div>
<p id="part6">第6章</p>
<div class="part"></div>


<!--设置的锚点链接设置行内样式将导航条定位到右上角-->
<div style="position: fixed;top:20px;right: 20px">
    <a href="#part1">第1章</a>
    <a href="#part2">第2章</a>
    <a href="#part3">第3章</a>
    <a href="#part4">第4章</a>
    <a href="#part5">第5章</a>
    <a href="#part6">第6章</a>
</div>

分析： 此时点击 导航条的各个区域就会跳转到页面指定的区域。
使用锚点链接的几个重点是：
1：在链接的目的区域设置id属性，并设置上唯一的一个id名称。
2：在导航条区域设置a标签，注意href属性的属性值是要链接区域的id值，并且一定要记住带“#”号。

a标签的一些其他功能：

1、发送邮件：

在点击了发送邮件的之后，浏览器会自动开启默认的邮箱软件，并将邮件地址放进接收方中。

<a href="mailto:邮件接收人">发送邮件</a>

2、打开QQ：

第一个链接不能打开非好友的对话框，第二个可以打开非好友QQ对话框

<a href="tencent://message/?uin=客服的QQ号&Site=&Menu-=yes">联系客服(不可以打开未添加好友的会话框)</a>

<a href="tencent://message/?Menu=yes&uin=客服的QQ号&Site=80fans&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a545b1714f9d45">链接到客服(可以打开未添加好友的会话框)</a>

3、拨打电话：

这个功能链接多用于移动端的网页，在点击拨打电话之后自动弹出拨号功能并且将电话号码填入；

<a href="tel:13110016538" class="call">拨打客服电话</a>

以上链接更改 邮件/QQ/电话号码 之后可以直接用

八、列表标签

1.无序列表 ul和li

​ 使用场景:网页导航、新闻列表

<!-- 快速生成 ul>li*数量>a{内容}-->
    <ul>
        <li><a href="">倒计时10分钟1</a></li>
        <li><a href="">倒计时10分钟2</a></li>
        <li><a href="">倒计时10分钟3</a></li>
        <li><a href="">倒计时10分钟4</a></li>
    </ul>

2.有序列表 ol和li

<!-- 有序列表 -->
    <ol type="a" start="4" reversed>
        <li>嘿嘿嘿嘿</li>
        <li>嘿嘿嘿嘿</li>
        <li>嘿嘿嘿嘿</li>
    </ol>

有序列表的type（A、a、1、I、i）、start（第几开始）和reversed（倒序，该属性为布尔属性）属性

3.自定义列表dl dt dd

应用场景：一般上面(dt)是图片或者专业名词，下面(dd)是文字说明

注意：dt和dd是在dl里面同级

<dl>
    <dt><a href="https://baidu.com" target="_blank">百度</a></dt>
    <dd>这是一个百度链接</dd>
    <dd>点击可以跳转到百度网页</dd>
</dl>

九、框架集标签 iframe标签

用法

<iframe src="引入地址" scrolling="yes/no/auto" frameborder="1/0" width="宽度值px" height="高度值px"></iframe>

属性

  1. frameborder

    • 1：有边框
    • 0：无边框

  2. scrolling

    • yes：有滚动条
    • no：没有滚动条
    • auto：原网站有滚动条则有，没有则不显示

  3. src

    ​ 链接网站地址

功能

  1. 引入在线网站

    <iframe src="https://www.sina.com.cn/" frameborder="0" width="100%" height="1000px" scrolling="no"></iframe>

  2. 引入本地网页

    <iframe src="../day1_7.26/1-概念.txt" frameborder="0" width="100%" height="500px" scrolling="auto"></iframe>

  3. 引入小广告

    <iframe src="广告地址" frameborder="0" width="100%" height="400px" scrolling="auto"></iframe>

十、表格标签 table标签

table(表格) th(表头) tr(行) td(列)

属性：

  1. borber:表格边框粗细
  2. bordercolor:表格边框颜色
  3. bgcolor：表格背景色
  4. align:

    • left(默认值):靠左

    • center: 居中

    • right: 靠右

      1. cellspacing: 每个表格之间的间距
      2. width：表格宽度
      3. height：表格高度

文字在单元格(tr td)中的属性(包括但不限于):

  • align: left/center/right

  • valign: top/middle/bottum

    注意：valign只能作用于单个行或者单个单元格上，在table上无效

单元格合并

  • 行合并：rowspan=“合并的个数”
  • 列合并：colspan=“合并的个数”

猜你喜欢

转载自blog.csdn.net/qq_44849572/article/details/126031919
今日推荐
周排行
对话吴恩达：为什么说制造业会是首个聚焦AI转型的行业？
linux常用命令速记
js实现input框添加移除属性
软件项目常见风险及其预防措施
JAVA 最全JAR包集合仓库
JS计时操作完成的时间
解决layui table方法渲染时时间格式问题
IIC通讯之TM1650
Python3中的输入输出
Spring Boot 2.0 利用 Spring Security 实现简单的OAuth2.0认证方式2
每日归档
更多
2025-02-13(0)
2025-02-12(0)
2025-02-11(0)
2025-02-10(0)
2025-02-09(0)
2025-02-08(0)
2025-02-07(0)
2025-02-06(0)
2025-02-05(0)
2025-02-04(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022