HTML相关

最新推荐文章于 2024-08-27 12:53:54 发布

Miracle Bear

最新推荐文章于 2024-08-27 12:53:54 发布

阅读量142

点赞数

分类专栏： HTML 文章标签： html servlet java

本文链接：https://blog.csdn.net/weixin_48100716/article/details/126481366

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

标题：HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1 align="center">一级标题并且居中显示</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

段落：HTML 段落是通过 <p> 标签进行定义的。以及一些修饰段落的标签

<p>段落</p>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

链接：HTML 链接是通过 <a> 标签进行定义的。

<a href="http://www.w3school.com.cn">一个链接</a>

图片：HTML 图像是通过 <img> 标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

结束标签与换行标签

<p>该内容不在页面中显示</p>
<br>

HTML注释

<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>

标记一个缩写

一段<abbr title="弹出的内容">鼠标在此停留会弹出小标签</abbr> 文字
<acronym title="弹出的内容">鼠标在此停留会弹出小标签</acronym>

嵌入小程序：<applet> 标签在 HTML 4 中用于定义嵌入式小程序（插件）。

<applet code="Bubbles.class" width="350" height="350">
嵌入的小程序名称
</applet>

有序与无序列表：两个列表可以嵌套

<h2>无序列表</h2>
<ul>
    <li>无序列表前方有个点</li>
    <li>列表内容</li>
</ul>
<h2>有序列表</h2>
<ol>
    <li>有序列表前方有一列数字</li>
    <li>列表内容</li>
</ol>

插入图像

src资源路径:
相对路径: 访问站内资源时使用
1. 资源和页面在同一目录:直接写图片名
2. 资源在页面的上级目录: ../图片名
3. 资源在页面的下级目录:文件夹名/图片名
绝对路径:访问站外资源时使用, 也称为图片盗链,有找不到图片的风险
alt:当图片不能正常显示时显示的文本
title:图片标题悬停在图片上显示的内容
width/height:设置宽高
1. 像素
2. 百分比
如果只设置宽度高度会等比例缩放

<img src="aa.png" alt="当图片不能正常显示时显示的文本">
<img src="../b.jpg" title="图片标题 悬停在图片上显示的内容" width="50%">
<img src="abc/c.jpg" width="300" height="300">

超链接

<a  href="http://www.baidu.com">超链接1</a>
<a href="a.png">超链接3</a>
<!--点击图片跳转链接-->
<a href="http://www.tmooc.cn">
    <img src="a.png" alt="">
</a>
<a href="#top">回到顶部</a>

分区标签

<div>第一行</div>
<div>第二行</div>
<span>第三行</span>
<span>第三行</span>

css内联样式

<!--不能复用-->
<h1 style="color: red">显示为红色</h1>

css内部样式

<head>
    <style>
        h2{
            color: blue;
        }
    </style>
</head>
<body>
<h2>此处样式为蓝色</h2>
</body>

css外部样式

!DOCTYPE html>
<html lang="en">
<head>
    <!--rel关系 引入的文件和页面之间的关系-->
    <link rel="stylesheet" href="my.css">
</head>
<body>
<h3>此处为绿色</h3>
</body>
</html>
<!--css-->
h3{
    color: green;
}

选择器

head>
    <style>
        /*id选择器*/
        #p1{color: red}
        /*类选择器*/
        .c1{color: blue}
        /*分组选择器*/
        h3,#p1,.c1{background-color: yellow}
        /*属性选择器*/
        input[type='text']{background-color: red}
        input[type='password']{color: green}
        /*任意元素选择器*/
        *{
            /*边框:粗细  样式   颜色*/
            border: 1px solid red;
        }
    </style>
</head>
<body><!---->
    <input type="text">红色输入框
    <input type="password">绿色输入框
    <h3>黄色3</h3>
    <p id="p1">黄色</p><p class="c1">黄色</p>
    <div class="c1">黄色</div>
</body>

表格

<table border="1">
    <!--border是边框-->
  <tr><!--table row 表示行-->
    <!--colspan跨列-->
    <td colspan="2" align="center">1-1</td>
    <!--table data表格数据 表示列-->
    <!--rowspan跨行-->
    <td rowspan="2">1-3</td><td rowspan="3">1-4</td>
  </tr>
  <tr>
    <td>2-1</td><td>2-2</td>
  </tr>
  <tr>
    <td align="center" colspan="3">3-1</td>
  </tr>
</table>
<table border="1">
  <caption>表格名称</caption>
  <tr><!--table head 表头  加粗并居中-->
    <th>1</th><th>1</th><th>1</th>
  </tr>
  <tr><!--普通表内容-->
    <td>1</td><td>2</td><td>2</td>
  </tr>
</table>

Miracle Bear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML相关

标题：HTML 标题（Heading）是通过 - 等标签进行定义的。段落：HTML 段落是通过标签进行定义的。绝对路径:访问站外资源时使用, 也称为图片盗链,有找不到图片的风险。3. 资源在页面的下级目录:文件夹名/图片名。2. 资源在页面的上级目录: ../图片名。图片：HTML 图像是通过标签进行定义的。1. 资源和页面在同一目录:直接写图片名。链接：HTML 链接是通过标签进行定义的。title:图片标题悬停在图片上显示的内容。
复制链接

扫一扫

专栏目录