JavaWeb01——基础标签及样式（黑马视频笔记）

发布于：2025-07-27 ⋅ 阅读:(20) ⋅ 点赞:(0)

1.如何用VScode写html代码

       1. 首先在vscode上安装一些插件，插件如下：

        2.打开你要写入的html文件的文件夹，然后右击“+ 新建文件”，命名 “xxx.html”,

        3.如果是写 css文件，那么也是右击“+新建文件”，命名“xxx.css”

为了使代码更加有序，我们也可以新建文件夹，然后文件夹中新建文件，具体根据需要进行调整

        5.在具体的vscode 的html文件中，我们输入！，然后回车，就可以自动补充好html的框架。

        6.查看页面效果的操作：右击找到Open in default browser

        7.注意：

                html语法比较松散，不区分大小写

2.html的基础框架

整体框架如下方框所圈出：

 <!DOCTYPE html>：声明该文件是html文件

<meta charset ="UTF-8">：声明字符集为uft-8

3.标签介绍

① <title>xxx</title>

        解释：页面顶端的页眉为xxx

        效果：

② 图片标签：

        标签名：<img>

        常用属性：

                src:路径，包括 绝对路径 和 相对路径

                weight：图片的宽度，单位为 px像素 或者 %

                height：图片的高度，单位为 px像素 或者 %

        代码及效果：            

效果截图（截了一部分）

③ 标题

        标签样式：<h x></h x> （其中x为1-6）

        注意：h1——>h6，标题重要程度依次递减。

④ CSS样式设置

        CSS的样式设置有三种：行内样式，内嵌样式，外联样式。

        优先级：行内样式>内嵌=外联

内嵌和外联设置一个标签的时候，你后写的那个优先，比如你先写了内嵌样式，后面写了外联样式，那么最后设置的是外联样式

       

         具体说明：

                行内样式：写在标签的 “style属性” 中。

                                  具体写法：<h1 style="属性名（如color）:值; 属性名:值">                                        

                

                内嵌样式：写在“style标签”中，该标签一般约定写在<head></head>中

                                具体写法：

样式设置：

调用：

结果：

                外联样式：写在一个单独的.css文件中

                                  调用方法：在<head>中写<link rel="stylesheet" href=".css的路径" >

⑤ CSS选择器

1.css的选择器种类：

        元素选择器（标签选择器），id选择器，类选择器（可以内嵌样式，也可以外联样式）

2.具体：

        元素选择器： 

                就是直接指定html中的标签，如前面内嵌选择器写的那样 直接h1{xxx：xx;xxx：xx;}


        id选择器： 

            选择具有指定id属性的元素

            id选择器的写法： #id值 {xxx：xx; xxx：xx}

            id选择器的调用： <标签 id=“id值”>


        

        类选择器： 

           选择具有指定类的元素，

           类选择器的写法：.class名称{xxx：xx; xxx：xx;}

           类选择器的调用：<标签 class=“class值”>

3.css选择器的优先级：
id选择器>类选择器>元素选择器（标签选择器）

⑥ 超链接

超链接标签：<a href=“...”target=“xxx”></a>

属性：
        href：指定资源访问的url;
        target：指定在何处打开该资源，

                _self：默认值，在当前页面打开;

                _blank：在空白页面打开

                ...

 ⑦其他一些常见的标签：

        <span></span>：行标签
        <p></p>：段落标签
        <hr>：分割线
        <br>：换行
        <b>:加粗

4.CSS中的常见属性：

color：字体的颜色，可以用“red、blue”等英文单词表示；可以用“rgb(x,x,x)”三色素表示；可以用“#xxxxxx”十六进制表示。

font_size:字体大小，注意写单位“像素px”

...

（其他好多待补充，详见HTML 系列教程）

5.整体代码

html：

<!--输入感叹号+回车，就会自动写出HTML的主体。右击，点击 open in default browser就可以查看效果-->

<!DOCTYPE html> <!--声明文档类型为 html-->
<html lang="en">

<head>
    <meta charset="UTF-8"> <!--字符集为utf-8-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day1——标题的样式设置</title>

    <style>
    
        h6 {
            color: red;
        }

        a{
            color: darkgrey;
            text-decoration: none;
        }

        #a123{
            color: brown;
            text-decoration-line: underline;
        }
        
        .class_1{
            color: deeppink;
            text-decoration-line: underline;
        }

    </style>


    <link rel="stylesheet" href="css/day1.css" >
</head>

<body>
    <h1>Day1——标题样式的确定 </h1>
    <h2>1.图片标签</h2>

    <p>图片标签为 《img》,其中有属性“src，width，height等”</p>
    <p>src是用来设置图片的路径的，路径包括 <b>相对路径</b> 和 <b>绝对路径</b></p>
    <p>width和height是用来设置图片的宽和高的，基本单位为 <b>像素px</b> 和 <b>百分比%</b> </p>
    
    <h3>1.1绝对路径</h3>
    <h4>a.绝对磁盘路径</h4>
    <img src="E:\java\java_web\img\1.jpg" width="20%"><!--绝对磁盘路径-->
    <h4>b.绝对网络路径</h4>
    <img src="http://i3.sinaimg.cn/blog/2014/1029/S129809T1414550868715.jpg" width="300px"><!--绝对网络路径-->
    

    <h3>1.2相对路径</h3>
    <p>相对路径中有 “./” 和 “../”;其中“./”表示当前目录，可以忽略不写；“../”表示上级目录，不可以省略</p>
    <h4>a.图片和文档在一级别目录中，直./或者原图片名即可</h4>
    <img src="./2.jpg">
    <h4>b.图片和文档不在一个大文件夹中，从文档所在的地方为基准，开始找上一级目录（../），在进入其他的下一级目录</h4>
    <img src="../img/3.jpg" width="20%">

    <hr><!--分割线条的写法-->



    <h2>2.CSS样式设置</h2>
    <p>CSS的样式设置有三种：<b>行内样式</b>，<b>内嵌样式</b>，<b>外联样式</b>。</p>
    <h3>2.1 行内样式</h3>
    <h6 style="color: blue; font-style: italic;">这是行内样式，设置方式是利用原标签中的 <b>style属性</b> </h6>
    
    <h3>2.2 内嵌样式</h3>
    <h6>这里是内嵌样式表</h6>

    <h3>2.3 外联样式表</h3>
    <h1>这里是外联样式</h1>

    <hr>


    <h2>3.CSS选择器</h2>
    <span>css的选择器有三种：<b>元素选择器（标签选择器）</b>,<b>id选择器</b>,<b>类选择器</b></span>
    <p>
        <b>元素选择器：</b> 就是直接指定html中的标签，如前面内嵌选择器写的那样 直接h1{xxx:xx;xxx:xx;} <br>
        <b>id选择器：</b> 选择具有指定id属性的元素，
            id选择器的写法：<span id="a123"> #id值 {xxx:xx; xxx:xx}</span>； 
            id选择器的调用：<span id="a123"> 《标签 id="id值"》</span> <br>

        <b>类选择器：</b> 选择具有指定类的元素，
            类选择器的写法：<span class="class_1">.class名称{xxx:xx; xxx:xx;}</span>; 
            类选择器的调用:<span class="class_1">《标签 class="class值"》</span>
    </p>
    <p>
        <b>css选择器的优先级：</b><br>
        <span style="color: brown;">id选择器>类选择器>元素选择器（标签选择器）</span>

    </p>

    <hr>




    <h2>4.超链接</h2>
    <p>超链接标签：<span style="color: brown;">《a href="..." target="xxx"》《/a》</span>（以上界面所有《》都是英文单书名号，为了防止误识别，所以用中文书名号表示了）</p>
    <p>
        <b>属性：</b><br>
        <b>href:</b>指定资源访问的url； <br>
        <b>target:</b>指定在何处打开该资源，<b>_self:</b>默认值，在当前页面打开；<b>_blank:</b>在空白页面打开。
    </p>
    <p>点击下面链接，跳转到w3school网页：</p>
    <a href="https://www.w3school.com.cn/h.asp" target="_blank">新页面打开w3school,查看标签样式攻略</a> <br>
    <a href="https://www.w3school.com.cn/h.asp" target="_self">本页面内跳转w3school,查看标签样式攻略</a>




</body>

</html>

css:

h1 {
    color: #89060b;
    font-family: Arial, Helvetica, sans-serif;
}

 效果：

学习视频为：黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）_哔哩哔哩_bilibili

图片来自网络，仅供学习，侵权删。 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布