HTML基础知识笔记

最新推荐文章于 2024-07-22 17:28:52 发布
最新推荐文章于 2024-07-22 17:28:52 发布
阅读量583 收藏 2
点赞数
分类专栏： 前端 文章标签： html 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52600282/article/details/125511124
版权

HTML

CqDemo

demo1.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</body>
</html>

运行效果：
在这里插入图片描述

基本标签

标签：加粗文字

标签: 控制文字大小，和颜色，字体

< hr> 标签：下划线

标签：字体倾斜

标签 ：字体下划线

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p align="center">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>

<p align="right">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>

<p>
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>

</body>
</html>

运行效果：
在这里插入图片描述

< p>段落标签 align段落对其方式

标题标签

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>标题标签H1</h1>
<p align="center">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>



<h6>标题标签H6</h6>
<p align="right">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>



<H2>标题标签h2</H2>
<p>
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>

</body>
</html>

运行效果：

在这里插入图片描述

< h>标签 ： 标题标签

图片标签< img >

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="/img/kebi.jpg" width="300px" height="80px" border="6px">
<h1>标题标签H1</h1>
<p align="center">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>



<h6>标题标签H6</h6>
<p align="right">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>



<H2>标题标签h2</H2>
<p>
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>

</body>
</html>

运行效果：

在这里插入图片描述

< img >标签: 图片标签 border加边框

超链接标签：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="demo1.1.html">超链接</a>
<img src="/img/kebi.jpg" width="300px" height="80px" border="6px">
<h1>标题标签H1</h1>
<p align="center">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>



<h6>标题标签H6</h6>
<p align="right">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>



<H2>标题标签h2</H2>
<p>
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>

</body>
</html>

运行效果：
在这里插入图片描述

跳转到：

在这里插入图片描述

超媒体链接标签

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<embed src="img/A6B1D8790BDE372EF12C49CF2D3F3E31.mp4">
<a href="demo1.1.html">超链接</a>
<img src="/img/kebi.jpg" width="300px" height="80px" border="6px">
<h1>标题标签H1</h1>
<p align="center">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>



<h6>标题标签H6</h6>
<p align="right">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>



<H2>标题标签h2</H2>
<p>
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>

</body>
</html>

运行效果如下：

在这里插入图片描述

< embed>标签：超媒体链接标签可以导入视频 音乐类

网页音乐播放的标签

< bgsound>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<bgsound src="http://music.163.com/song/media/outer/url?id=1807799505.mp3">
    唯一
</bgsound>
<embed src="img/A6B1D8790BDE372EF12C49CF2D3F3E31.mp4">
<a href="demo1.1.html">超链接</a>
<img src="/img/kebi.jpg" width="300px" height="80px" border="6px">
<h1>标题标签H1</h1>
<p align="center">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>



<h6>标题标签H6</h6>
<p align="right">
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>



<H2>标题标签h2</H2>
<p>
    <b>下午好</b>，今天我们开始学习<font size="5" color="#d2691e" face="黑体"> HTML</font><br/>
<hr width="50%" align="left" size="10" color="#000"/>
<i>下午好</i>，今天我们开始学习HTML<br>
<u>下午好</u>，今天我们开始学习HTML<br>
</p>

</body>
</html>

运行效果：

在这里插入图片描述

注意：这时候一进这网页就听到了《唯一》这一首歌

< bgsound >音乐背景标签

表格

CqDemoHtml

demo2.html

简单的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="300px" height="200px" border="2px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
</body>
</html>

运行效果如下：

一行三列

在这里插入图片描述

属性：

cellpadding : 内容距离单元格内边距的距离 如果距离太小有一端达不到那么这个距离就会失效

cellspacing : 单元格之间的距离

在这里插入图片描述

align : 单元格对其的方式

剧中效果

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="300px" height="200px" border="2px" cellpadding="0" cellspacing="" align="center">
    <tr align="center" bgcolor="#6495ed">
        <td >1</td>
        <td>2</td>
        <td background="img/kebi.jpg">3</td>
    </tr>
    <tr>
        <td>a</td>
        <td bgcolor="#dc143c">b</td>
        <td align="right">c</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

属性：

< tr align=“center” bgcolor=“#6495ed”> 这一行 内容居中 颜色为#6495ed

< td background=“img/kebi.jpg”>3 单元格插入背景

< td align=“right” >c 单元格内容靠右对其

< td bgcolor=“#dc143c”>b 单元格背景颜色

单元格合并问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="300px" height="200px" border="2px" cellpadding="0" cellspacing="" align="center">
    <tr align="center" bgcolor="#6495ed">
        <!--合并横两个单元格时候需要把它前一个或者后一个单元格删除才可以合拼-->
        <td  colspan="2">合并横两单元格</td>
        <td background="img/kebi.jpg">3</td>
    </tr>
    <tr>
        <!--合并同一列下的两个单元格时候需要删除它上一个或者下一个单元格即可-->
        <td rowspan="2">a</td>
        <td bgcolor="#dc143c">b</td>
        <td align="right">c</td>
    </tr>
    <tr>
        <td bgcolor="#dc143c">b</td>
        <td align="right">c</td>
    </tr>
</table>
</body>
</html>

运行效果：

在这里插入图片描述

注意：

属性colspan：合并横两个单元格时候需要把它前一个或者后一个单元格删除才可以合拼

属性rowspan=“2” ：合并同一列下的两个单元格时候需要删除它上一个或者下一个单元格即

列表

demo2.2html

无序链表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>芒果</li>
    <li>苹果</li>
    <li>西瓜</li>
    <li>梨子</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

</body>
</html>

运行效果：

在这里插入图片描述

点点开头无序列表

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>芒果</li>
    <li>苹果</li>
    <li>西瓜</li>
    <li>梨子</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>
<ol >
    <li>芒果</li>
    <li>苹果</li>
    <li>西瓜</li>
    <li>梨子</li>
    <li>香蕉</li>
    <li>橘子</li>
</ol>

</body>
</html>

运行效果：

在这里插入图片描述

1 2 3排序就是有序列表

注意：排序的变化属性

type

在这里插入图片描述

在这里插入图片描述

滚动

demo2.3.html

< marquee>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<marquee direction="down" behavior="alternate" loop="6" >
    你好！欢迎来到学习不快乐天堂！！
</marquee>
</body>
</html>

运行效果：

在这里插入图片描述

属性：

direction : 滚动方向

behavior : 滚动方式

loop : 滚动次数

层

demo2.4.html

在这里插入图片描述

表单

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="demo3.1_1.html">
    <input type="text" value="请输入姓名">
    </br>
    <input type="password" value="请输入密码">
    </br>
    <!--单选框 如果复选框的nema相等就说明他们是一组 如果有checked属性就说明此复选框为选中状态-->
    <input type="radio" name="sex" checked="checked"/>男
    <input type="radio" name="sex"/>女
    </br>
    <!--复选框 如果有checked属性就说明此复选框为选中状态-->
    爱好：
    <input type="checkbox">学Python
    <input type="checkbox">学Linux
    <input type="checkbox">学Mysql
    <input type="checkbox">学Java
    </br>
    <!--按钮 此按钮关联form里的action 跳转到demo3.1_1.html-->
    <input type="submit" value="确定">
    <input type="reset" value="还原">
    <!---普通按钮-->
    <input type="button" value="普通按钮">
    </br>
    <!--! 文本域：20行10列-->
    <textarea cols="20" rows="10">请仔细阅读，下面的条款需求承诺书！</textarea>
    </br>

    <!--label里的东西不可以改-->
    <label>姓名 :</label><input type="text"/>
    </br>

     <!-- 分组框  fieldset外边框 legend外边框上的文字-->
        <legend>爱好</legend>
        <input type="checkbox">学Python</br>
        <input type="checkbox">学Linux</br>
        <input type="checkbox">学Mysql</br>
        <input type="checkbox">学Java</br>
    </fieldset>
</form>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

表单元素

1.文本框 : < input type=“text”>

2.密码框 : < input type=“password”>

3.单选框 : < input type=“radio”>

4.复选框 : < input type=“checkbox”>

5.提交框 : < input type=“submit”>

6.重置按钮 : < input type=“reset”>

7.普通按钮 : < input type=“button”>

8.文本域标签 : < textarea>

框架

横向分割网页

< frameset>

demo3.2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--纵向分割网页-->
<frameset cols="30%,*">
    <frame src="demo3.2_1.html">
    <frame src="demo3.2_2.html">
</frameset>
</html>

demo3.2_1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#00ffff">

</body>
</html>

demo3.2_2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#d2691e">

</body>
</html>

运行demo3.2.html效果如下：

在这里插入图片描述

横向分割

< frameset rows=“”>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--横向分割网页-->
<frameset rows="30%,*">
    <frame src="demo3.2_1.html">
    <frame src="demo3.2_2.html">
</frameset>
</html>

运行效果如下：

在这里插入图片描述

横向纵向分割网页

创建demo3.2_3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--网页横向分割 上30%  noresize name="right"关联demo3.2_2.html里面的超链接来替换demo3.2_1.html-->
<frameset rows="30%,*">
    <frame src="demo3.2_1.html" noresize name="right">
    <!--底部网页纵向分割左50%  noresize固定比例不可以变动-->
    <frameset cols="50%,*">
        <frame src="demo3.2_2.html" noresize>
        <frame src="demo1.html" noresize>
    </frameset>
</frameset>
</html>

为了使用右边的页面里实现超链接跳转到顶部页面 就修改demo3.2_2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#d2691e">
<a href="demo1.1.html" target="right">demo1.1.html</a>
<a href="demo2.2.html" target="right">demo2.2.html</a>
<a href="demo2.html" target="right">demo2.html</a>

</body>
</html>

运行效果如下：

在这里插入图片描述

框架标签：

< frameset cols=“50%,*”> :纵向分割左边50% 其余全给右边

rows 属性：横向分割

< frame>

内嵌框架

上面我们发现用了框架标签就没有了< body>标签

所以内切框架就是存在于< body>里的

创建demo3.3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="demo3.2_1.html" name="omg"></iframe>
<br>
<a href="demo1.1.html" target="omg">demo1.1.html</a>
<a href="demo2.2.html" target="omg">demo2.2.html</a>
<a href="demo2.html" target="omg">demo2.html</a>

</body>
</html>

运行截图如下：

在这里插入图片描述

内嵌框架标签：

< iframe src=“demo3.2_1.html” name=“omg”>

src属性：底下模板是demo3.2_1.html

name属性：关联到超链接a标签中的target

css的作用

美化网页

选择器

demo4.1.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    /*类选择器*/
    .ziti{
        font-size: 24px;
        color: deepskyblue;
    }
    /*id选择器*/
    #Idxuanzeqi{
        font-size: 50px;
        color: red;
    }
    /*标签选择器*/
    P{
        font-size: 80px;
        color: darkblue;
    }
    /*伪类 鼠标放上去就变大括号里面的设置*/
    p:hover{
        font-size: 16px;
        color: gold;
    }
</style>
<body>
<!--使用类选择器-->
<font class="ziti">下午好!快快学习好Java</font>
</br>
<!--使用id选择器-->
<font id="Idxuanzeqi">下午好!快快学习好Java</font>
</br>
<!--使用标签选择器-->
<p>timing侠</p>
</body>
</html>

运行效果：

在这里插入图片描述

选择器有：

1.类选择器也就是class选择器

2.id选择器

3.伪类

背景

demo4.2,html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .background1{
            background-image: url("img/kebi.jpg");/*背景图片*/
            background-color: cyan;/*背景颜色*/
            background-repeat: no-repeat;/*不平铺*/
            background-position: 100px 100px;/*距离x y轴各100px 图片左顶点为准*/

        }
    </style>
</head>
<body class="background1">
科比布莱恩特！<br/>
科比布莱恩特！<br/>
科比布莱恩特！<br/>
科比布莱恩特！<br/>
科比布莱恩特！<br/>
科比布莱恩特！<br/>
科比布莱恩特！科比布莱恩特！<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

运行效果：

在这里插入图片描述

属性值：

​ background-image: url(“img/kebi.jpg”);/背景图片/
​ background-color: cyan;/背景颜色/
​ background-repeat: no-repeat;/不平铺/
​ background-position: 100px 100px;/距离x y轴各100px 图片左顶点为准/

边框

demo4.3.html

在这里插入图片描述

点线边框：

在这里插入图片描述

dotted 点线

虚线边框;

在这里插入图片描述

虚线边框属性：

dashed

demo.4.3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    input{
        border: 1px dashed red;/*边框大小1px 边框直虚线 颜色红色*/
    }
    div{
        width: 150px;
        height: 60px;
        border-left: 2px solid red;/*左边框线 大小2px 边框实线 红色*/
        border-right: 2px solid black;
        border-top: 2px dotted royalblue;
        border-bottom: 2px dashed lawngreen;
    }
</style>
<body>
输入框：
<input type="text">
<br/>
<div>测边框线</div>
</body>
</html>

运行效果：

在这里插入图片描述

文本

demo4.5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-align: center;/*文字对齐方式居中*/
            text-decoration: underline;/*文字下有下划线 overline上划线 删除线line-through  没有线none*/
            line-height: 40px;/*行和行之间的高度*/
            letter-spacing: 6px;/*字和字之间的距离*/
            text-indent: 80px;/*第一行向后缩进30px*/
        }
    </style>
</head>
<body>
 <p> 我亲爱的Java你下午好不好啊<br/>
     我亲爱的Java你下午好不好啊<br/>
     我亲爱的Java你下午好不好啊<br/>
     我亲爱的Java你下午好不好啊<br/>
     我亲爱的Java你下午好不好啊<br/>
     我亲爱的Java你下午好不好啊<br/>
     我亲爱的Java你下午好不好啊<br/>
     我亲爱的Java你下午好不好啊<br/>
     我亲爱的Java你下午好不好啊<br/>
     我亲爱的Java你下午好不好啊<br/>
     我亲爱的Java你下午好不好啊<br/>
     我亲爱的Java你下午好不好啊<br/></p>
</body>
</html>

运行图片：

在这里插入图片描述

text-align: center;/*文字对齐方式居中*/
text-decoration: underline;/*文字下有下划线 overline上划线 删除线line-through  没有线none*/
line-height: 40px;/*行和行之间的高度*/
letter-spacing: 6px;/*字和字之间的距离*/
text-indent: 80px;/*第一行向后缩进30px*/

字体

demo4.6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    font{
        color: darkmagenta;
        font-family: 仿宋;/*字体选择*/
        font-size: 30px;/*字体大小*/
        font-style: italic;/*倾斜*/
        font-weight: bold;/*加粗*/
    }
</style>
<body>
<font>
    JAVA不是JAVA这是巨坑大辣鸡
</font>
</body>
</html>

运行效果：

在这里插入图片描述

​ color: darkmagenta;
​ font-family: 仿宋;/字体选择/
​ font-size: 30px;/字体大小/
​ font-style: italic;/倾斜/
​ font-weight: bold;/加粗/

列表

在这里插入图片描述

demo4.7.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    li{
        list-style-type: none; /*消除前面的小黑点*/
        list-style-image: url("img/考试.png");
        list-style-position: inside;
    }
</style>
<body>
 <ul>
     编程
     <li>Java</li>
     <li>Linux</li>
     <li>Python</li>
 </ul>

</body>
</html>

运行效果如下：

在这里插入图片描述

高宽设置

demo4.8.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            border: 6px solid red;
            width: 200px;
            height: 120px;
        }
    </style>
</head>
<body>
<div class="one"></div>
</body>
</html>

运行效果如下：

在这里插入图片描述

边距

margin 边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            border: 6px solid red;
            width: 200px;
            height: 120px;
            margin-left: 60px; /*考左边60px*/
            margin-top: 400px;/*考上边400px*/
        }
    </style>
</head>
<body>
<div class="one"></div>
</body>
</html>

运行效果如下：

在这里插入图片描述

间隙

padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            border: 6px solid red;
            width: 200px;
            height: 120px;
            margin-left: 60px;
            margin-top: 400px;
            padding-left: 180px;
            padding-top: 60px;
        }
    </style>
</head>
<body>
<div class="one">
    Java嘞
</div>
</body>
</html>

运行效果：

在这里插入图片描述

布局

横向布局

demo4.9.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .one{
      border: 1px solid blue;
      width: 400px;
      height: 160px;
    }
    .tow{
      border: 1px solid blue;
      width: 400px;
      height: 160px;
      margin-top: 45px;/*上边距*/
    }
    .three{
      border: 1px solid blue;
      width: 400px;
      height: 160px;
    }
  </style>
</head>
<body>
<div class="one"></div>
<div class="tow"></div>
<div class="three"></div>
</body>
</html>

运行效果如下:

在这里插入图片描述

纵向布局

demo5.1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            border: 1px solid blue;
            width: 200px;
            height: 160px;
            float: left;
        }
        .tow{
            border: 1px solid blue;
            width: 200px;
            height: 160px;
            float: left;
            margin-left: 20px;/*靠左盒子边距20px*/
            margin-right: 40px;/*靠右边盒子40px*/
        }
        .three{
            border: 1px solid blue;
            width: 200px;
            height: 160px;
            float: left;
            /*margin-left: 10px;!*靠右盒子边距10px*!*/
        }
    </style>
</head>
<body>
<div class="one"></div>
<div class="tow"></div>
<div class="three"></div>
</body>
</html>

运行效果如下：

在这里插入图片描述

嵌套布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            border: 3px solid blue;
            width: 200px;
            height: 160px;
            padding-left: 60px;/*内边距左30px*/
            padding-top: 20px;/*内边距上20px*/
        }
        .tow{
            border: 3px solid red;
            width: 100px;
            height: 60px;
        }
        .three{
            border: 3px solid black;
            width: 50px;
            height: 30px;
            margin-left: 70px;/*右边距70px*/
            margin-top: 10px;/*上边距10px*/

        }
    </style>
</head>
<body>
<div class="one">
    <div class="tow"></div>
    <div class="three"></div>
</div>

</body>
</html>

运行效果如下：

在这里插入图片描述

垫底菜鸡
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML中html元素的lang属性的说明
mirro81的博客
07-16 5万+
HTML中html元素的lang属性的说明我在刚开始学习HTML的时候，关于基本的HTML格式中有一点不明白的地方，基本格式如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body></body> </html>究竟html标签中的lang属性是干嘛的
我的HTML基础知识笔记
08-02
前端小白
HTML元素的lang属性的说明及详解
刺心的博客
09-16 1万+
我在刚开始学习HTML的时候，关于基本的HTML格式中有一点不明白的地方，基本格式如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body><...
HTML：lang属性作用
最新发布
Weiki的博客
07-22 1229
HTML：lang属性作用
HTML的基本标签
lsy01的博客
02-04 2101
HTML的基本标签 这是一个定义文档类型为HTML5的标签，一个网页要先定义文档的类型 lang=“en”：该文档的根元素 1.属性lang是英语language的缩写，意思是语言，"en"代表英语，"zh-CN"代表中文； 2.其实不写lang属性，整个HTML文档的显示是没有任何问题的； 3.我们都知道，如果你在中国，本地浏览器的默认语言是中文，当我们打开一个外国网站时，浏览器会提示“是否将...
HTML语法格式
m0_56246862的博客
08-04 4183
HTMLHTML基本框架 HTML基本框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> 在idea中创建HTML文件会自动生成以上代码片 !DOCTYPE html是用来告诉浏览器
html标签中lang属性踩的一个小坑，日常中还是需要留意的风险点
天渺(喵)工作室
02-10 576
html lang。部有大量的广告行业英文缩写，比如CPC（Cost Per Click ），CPM（** Cost Per Click ），CPD（*Cost Per Click ）等等，然后浏览器（可能是国内的某些浏览器自带翻译器的那种）碰到英文就自动提示需要翻译，用户可能一直也把翻译默认打开着。如果需要有多语言切换的，顺便也要切换lang配置编码。HTML 的 lang 属性可用于声明网页或部分网页的语言，这对搜索引擎和浏览器是有帮助的。在html中lang是英语language的缩写，是语言的意思。
html5 css3 简单基础知识笔记
01-27
html5 css3 简单基础知识笔记
PHP基础知识笔记
01-08
在PHP基础知识笔记中，我们将深入探讨以下几个核心概念： 1. **PHP语法**：PHP脚本以`开始，`?>`结束，可以放置在HTML文档的任何位置。PHP文件的默认扩展名为`.php`，通常包含HTML和PHP代码。 2. **注释**：PHP...
HTML基础笔记
02-06
以上标签是HTML的基础知识，对于初学者来说，掌握这些标签是构建基本网页的关键。而随着HTML的发展，还引入了更多的标签和元素，例如HTML5中加入了如semantic tags（语义标签）和其他增强特性的标签，如、、等，用以...
html,css基础知识笔记.doc
01-14
1. **HTML基础** - **超文本标记语言（HTML）**：HTML是一种标记语言，用于定义网页的结构和内容。它的主要任务是组织网页的元素，如文本、图片、链接等。 - **HTML发展**：HTML从最初的HTML1.0版本发展至今，经历...
HTML学习笔记
奋斗ing的博客
01-20 1503
HTML学习笔记 跟着黑马程序员学的，在这里做个笔记。 基本语法 1.<!DOCTYPE>是一个文档类型声明标签，不是HTML标签；位于文档最前面的位置，在<html>标签之前 <!DOCTYPE html>告诉浏览器当前页面使用html5版本来显示页面。 2.<html lang="zh-CN" >表示用的是中文，en表示英文，fr为法文。 3.<meta charset="UTF-8" >其中UTF-8称为万国码，GB2312为中文简体，BIG
关于 html lang="en"
Sweet77
04-30 2439
<html lang="en"> 向搜索引擎表示网站语言为英文，其"lang"的意思就是“language”，而“en”即表示english 如果设置中文页面，可将其改为 <html lang="zh"> ...
html标签中的lang属性
qq_41672590的博客
01-29 4387
写在html标签中的lang属性作用：声明当前页面的语言类型。 如： //英文 //中文 //日文 //美式英文 注意：lang属性中的语言代码不区分大小写 //英文 //英文 上面的两行代码一样的效果。 另外，lang属性也可以加到普通标签上。 如： this is English . lang 属
HTML笔记
weixin_46307478的博客
02-25 1023
HTML 1.初识HTML HTML Hyper Text Markup Language(超文本标记语言) 超文本包括文字、图片、视频、音频、动画等。 现在用的是HTML5。 ECMScript是JavaScript需要遵守的规范 面试可能问到的问题： W3C是什么 W3C标准包括什么 前端的最常用的IDE：WebStorm 2.网页基本信息 注释： <!--DOCTYPE：(文档类型)告诉浏览器，我们要使用什么规范，默认是HTML5，因此可以省略不写--> <!
HTML基础
qq_44801321的博客
08-14 3782
W3C标准 结构化标准语言（HTML,XML）. 表现标准语言（CCS）. 行为标准语言（DOM，ECMAscript） HTML基本结构 <body> <-body>等成对的标签分别叫做开放标签和闭合标签 单独出现的叫自闭合标签 <!--DOCTYPE用来定义标准--> <!DOCTYPE html> <html lang="en"> <!--head标签代表网页的头部--> <head> <!--meta描述
html lang属性的作用
2301_79422212的博客
03-09 412
在中国，本地浏览器的默认语言为中文。此时如果使用lang="en"，html里面如果没有使用lang属性，打开网页不会有任何问题。则浏览器会显示是否翻译为中文。
html lang="en"
热门推荐
weixin_42528089的博客
07-08 1万+
<html lang="en"> 向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english 你的页面如果是中文页面，可将其改为 <html lang="zh"> zh即表示中文 ...
HTML5学习笔记-01-html语义化标签
欢迎访问我的主页：https://www.bookbook.cc
06-30 8723
一、URl 二、网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别 2.1 声明英文网站 2.2 声明中文网站 三、meta 3.1 keyword 表示搜索关键字 3.2 description 网站摘要 3.3 Viewport 响应式声明 四、语义化标签 4.1 header 头部区域 4.2 footer 尾部区域 4.3 nav 导航区域 4.4 article(文章) 主内容区域 4.5 section(部分) 定义文档中相似的区域 4.6 asi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值