javaweb:HTML

 

 

1. 文件标签：构成html最基本的标签
　　html:html文档的根标签
　　head：头标签。用于指定html文档的一些属性。引入外部的资源
　　title：标题标签。
　　body：体标签
　　<!DOCTYPE html>：html5中定义该文档是html文档
2. 文本标签：和文本有关的标签
　　注释：<!-- 注释内容 -->
　　<h1> to <h6>：标题标签
　　　　h1~h6:字体大小逐渐递减
　　<p>：段落标签
　　<br>：换行标签
　　<hr>：展示一条水平线
　　属性：
　　　　color：颜色
　　　　width：宽度
　　　　size：高度
　　　　align：对其方式
　　　　　　center：居中
　　　　　　left：左对齐
　　　　　　right：右对齐
　　<b>：字体加粗
　　<i>：字体斜体
　　<font>:字体标签
　　<center>:文本居中
　　　属性：
　　　　color：颜色
　　　　size：大小
　　　　face：字体

  属性定义：
　　color：
　　　　1. 英文单词：red,green,blue
　　　　2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
　　　　3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
　　width：
　　　　1. 数值：width='20' ,数值的单位，默认是 px(像素)
　　　　2. 数值%：占比相对于父元素的比例

 案例：

1.文本标签

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!-- 注释 -->
    <!--br 换行-->
    白日依山尽，<!--<br />--> <br>
    黄河入海流。<br>

   <!-- 标题标签 h1~ h6-->

    黑马旅游网 <br>
    <h1>黑马旅游网</h1>
    <h2>黑马旅游网</h2>
    <h3>黑马旅游网</h3>
    <h4>黑马旅游网</h4>
    <h5>黑马旅游网</h5>
    <h6>黑马旅游网</h6>

    <!-- 段落标签 p -->
    <p>
    1 黑马旅游网黑马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
    </p>
    <p>
    2 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
    </p>

    <p>
    3 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网 黑马旅游网黑马旅游网黑马旅游网黑马旅游网。
    </p>

   <!-- hr 显示一条水平线-->
    <hr color="red" width="200" size="10" align="left"/>
    <hr>
   <!-- 加粗 b-->
    白日依山尽<br>
    <b>白日依山尽</b>
    <hr>
    <!-- 斜体 i -->
    白日依山尽<br>
    <i>白日依山尽</i>
    <!-- 字体标签 font-->
    <hr>
    <font color="red" size="5" face="楷体">白日依山尽</font> <br>

    <font color="#3626F1" size="5" face="楷体">黑马程序员</font> <br>

    <hr color="red" width="50%" size="10" align="left"/>


    <center>
        <font color="red" size="5" face="楷体">白日依山尽</font> <br>
    </center>
    <br> <br> <br> <br> <br>


</body>
</html>
View Code

 

2.图片标签

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>

</head>
<body>

    <!--展示一张图片 img-->

    <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>

    <!--
        相对路径
            * 以.开头的路径
                * ./：代表当前目录  ./image/1.jpg
                * ../:代表上一级目录
     -->

    <img src="./image/jiangwai_1.jpg">

</body>
</html>
View Code

 

 

 

3.列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

    <!--有序列表 ol-->
    早上起床干的事情
    <ol type="A" start="5">
        <li>睁眼</li>
        <li> 看手机</li>
        <li> 穿衣服</li>
        <li> 洗漱</li>
    </ol>
   <!-- 无序列表  ul-->

    早上起床干的事情
    <ul type="disc">
        <li>睁眼</li>
        <li> 看手机</li>
        <li> 穿衣服</li>
        <li> 洗漱</li>
    </ul>


    早上起床干的事情
    <ul type="square">
        <li>睁眼</li>
        <li> 看手机</li>
        <li> 穿衣服</li>
        <li> 洗漱</li>
    </ul>

    早上起床干的事情
    <ul  type="circle">
        <li>睁眼</li>
        <li> 看手机</li>
        <li> 穿衣服</li>
        <li> 洗漱</li>
    </ul>


</body>
</html>
View Code

 

 

posted @ 2021-02-09 13:18  薄眠抛却陈年事。  阅读(46)  评论(0)  编辑  收藏  举报