黑马JavaWeb就业课自用笔记day01_html

卡米亚や

已于 2022-04-26 12:00:30 修改

阅读量156

点赞数 2

分类专栏： JavaWeb

于 2022-04-13 14:29:29 首次发布

本文链接：https://blog.csdn.net/m0_46940416/article/details/124146925

版权

前端 html5

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML

简介

超文本标记语言

用于编写网页

右键查看源代码可显示

网页内容包含：

HTML代码：用于展示需要显示的数据

CSS代码：使现实的数据更好看

JavaScript代码：使整个界面显示的数据具有动画效果

网页根据内容是否改变分为：静态界面、动态界面

静态界面：编写之后在浏览器不再改变网页。HTML就是用于编写静态网页的。

动态界面：会根据不同情况展出不同内容。例如：登陆成功后右上角显示用户名。

HTML语言特点

HTML语言不需要编译，直接使用浏览器阅读即可

HTML文件的扩展名是 *.html或 *.htm

HTML结构都是由标签组成

标签名预先定义好的，只需了解其功能

标签名称不分大小写

通常情况夏标签由开始标签和结束标签组成（成对出现）。例如

如果没有结束标签，建议以/结尾。例如

HTML结构包括两部分：头head和体body

HTML代码结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标题</title>
    </head>
    <body>
        主体
    </body>
    <!-- 
        我是注释 
        浏览器使用建议：
            windows10 EDGE
            windows IE 11

            FireFox 火狐浏览器
            Chrome 谷歌浏览器
            Safari 苹果浏览器
            Opear 欧鹏浏览器
        
        W3C 万维网联盟，发布互联网标准
        6,7,8
        9,10
        11
        
    -->
</html>

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标题</title>
    </head>
    <body>
        <!-- 
        公司简介
        标题标签
    -->
    <h1>公司简介</h1>
    <hr />
    <!-- 
        大的文本区域
        font文本颜色，字体加粗和斜体
        换行和段落
     -->
     <font color="red">
         xxxxxxxx<br />
         <b>xxxxx</b><br />
         <i>xxxxxxxxxxxxxx</i>
     </font>
    </body>
</html>

加图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标题</title>
    </head>
    <body>
        <!-- 
        公司简介
        标题标签
    -->
    <h1>公司简介</h1>
    <hr />
    <!-- 
        大的文本区域
        font文本颜色，字体加粗和斜体
        换行和段落
     -->
     <font color="red">
         xxxxxxxx<br />
         <b>xxxxx</b><br />
         <i>xxxxxxxxxxxxxx</i>
         <br />
     </font>
     <!-- 
         页面中添加图片
         标签<img />
         属性：src="图片的路径"
         相对路径

         属性：width height
         title="图片标题"
         alt="图片加载失败"
      -->
      <img src="img/img1.jpg"/><br />
      <img src="img/img1.jpg" width="500" height="500" title="384" alt="你看见我了吗？"/>
    </body>
</html>

列表标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标题</title>
    </head>
    <body>
        <!-- 
            列表标签：
                有序列表：ol
                无序列表：ul
                列表项：li
         -->
         <ol start="260" type="1">
             <li>111</li>
             <li>222</li>
             <li>333</li>
             <li>444</li>
         </ol>
         <ul type="square">
             <li>111</li>
             <li>222</li>
             <li>333</li>
             <li>444</li>
         </ul>
    </body>
</html>

超链接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标题</title>
    </head>
    <body>
        <!-- 
            超链接：
                从一个页面，跳转到另一个页面
                标签<a><a/>
                属性：href="另一个页面的路径"
                属性：target="默认值_self" 属性_blank 新窗口打开链接
         -->
         <a href="test.html">
             点我跳转
         </a>
         <ol start="260" type="1">
            <li><a target="_blank" href="http://www.baidu.com">百度</a></li>
            <li><a href="http://www.163.com">网易</a></li>
            <li>333</li>
            <li>444</li>
        </ol>
    </body>
</html>

合并单元格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标题</title>
    </head>
    <body>
        <!-- 
            合并单元格
         -->
         <table border="1" width="50%" cellpadding="0" cellspacing="0" align="center">
             <tr>
                 <!-- 跨列操作，横向，属性colspan="几列" -->
                 <td colspan="3">1-1</td>
                 <!-- <td>1-2</td>
                 <td>1-3</td> -->
             </tr>
             <tr>
                 <!-- 跨行操作，纵向，属性rowspan="几行" -->
                <td rowspan="2">2-1</td>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
            <tr>
                <!-- <td>3-1</td> -->
                <td>3-2</td>
                <td>3-3</td>
            </tr>
         </table>
    </body>
</html>

在这里插入图片描述

空格

&nbsp;

test store

//图片改成自己的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/CSS">
            a:link{color: blueviolet;}
        </style>
    </head>
    <body>
        <!-- 
            头部，logo，正平保证，登录注册
            表格：1*3 1行3列
        -->
        <table width="1200" cellpadding="0" cellspacing="0">
            <tr>
                <!-- logo -->
                <td>
                    <img src="1.jpg" width="500"/>
                </td>
                <!-- 图片 -->
                <td>
                    <img src="2.jpg" width="500"/>
                </td>
                <!-- 登录注册 -->
                <td>
                    <a href="#">登录</a> &nbsp;
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </td>
            </tr>
        </table>

        <!-- 导航栏 -->
        <table width="1200" cellpadding="0" cellspacing="0" align="center" bgcolor="blueviolet">
            <tr> &nbsp;&nbsp;
                <a href="#">首页</a>&nbsp;
                <a href="#">手机数码</a>&nbsp;
                <a href="#">电脑办公</a>&nbsp;
                <a href="#">实用家居</a>&nbsp;
                <a href="#">户外用品</a>&nbsp;
            </tr>
        </table>

        <br />
        <!-- 轮播图 -->
        <table width="1200" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <img src="3.jpg" width="1200">
                </td>

            </tr>
        </table>

        <!-- 热门商品文字 图片 -->
        <table width="1200" cellpadding="0" cellspacing="0">
            <tr>
                <h3>热门商品<img src="4.jpg" width="100"></h3>
                <img src="5.png" width="1200">
            </tr>
        </table>

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>

</html>

卡米亚や

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马JavaWeb就业课自用笔记day01_html

HTML简介超文本标记语言用于编写网页右键查看源代码可显示网页内容包含：HTML代码：用于展示需要显示的数据CSS代码：使现实的数据更好看JavaScript代码：使整个界面显示的数据具有动画效果网页根据内容是否改变分为：静态界面、动态界面静态界面：编写之后在浏览器不再改变网页。HTML就是用于编写静态网页的。动态界面：会根据不同情况展出不同内容。例如：登陆成功后右上角显示用户名。HTML语言特点HTML语言不需要编译，直接使用浏览器阅读即可HTML文件的扩展名是 *.html或
复制链接

扫一扫