html标签

html标签的作用

（1.）Link标签。可以导入css和其他的插件。

A标签，用途很广，可以放入网址，文件等，（注意放入东西后，a标签里面要放入字体，否则会显示不出来），放入文件点击a标签会下载此文件。

(3.)div，一个最常用的东西，它是一个快级元素，也是一个新的行。div可以把文档分割为独立的、不同的部分。div里面可以放入class或id等

（4.）可以创建各种不同类型的框，都取决于type里面输入的代码。举个例子text是文本框，那你把text换成password他就成了密码框，text输入是可以看见你输入了什么，密码框都是统一一个点的。

（5.）h1到h6标签，相当于从大到小,h1最大，h6最小。只有1到6，没有更多了。

(6.)script是一个可以引入js和插件的代码，它的功能挺多的，单单不只是引入，也可以在源代码上输入js的样式

<!DOCTYPE html>
<!-- html5,html语言的第五个版本
超文本标记语言
一处发布，到处可以查看 
上面是HTML5的标识，告诉浏览器这是按照
HTML5标准写的代码
-->
<html>
<head>
    <!-- 头部，页面背景上的设置 -->
    <meta charset="utf-8">
    <!-- meta元标签 -->
    <!-- charset编码格式 -->
    <!-- GB-2312国家标准
    GBK国家标准扩展包 -->
    <title>Hello，World！</title>
</head>
<body>
    <div>无实意标签</div>
    <p>段落</p>
    <span>无实意标签</span>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180826%2F56195667faad4b97be4b66f55a9b1e9d.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638327866&t=063a07f5b16adc69b0d00fc04737bfbb">
    <ul type="circle">
        <!-- 无序列表 -->
        <li>aaaaa</li>
        <li>bbbbb</li>
        <li>ccccc</li>
    </ul>
    <ol type="i">
        <li>aaaaa</li>
        <li>bbbbb</li>
        <li>ccccc</li><li>aaaaa</li>
        <li>bbbbb</li>
        <li>ccccc</li><li>aaaaa</li>
        <li>bbbbb</li>
        <li>ccccc</li><li>aaaaa</li>
        <li>bbbbb</li>
        <li>ccccc</li><li>aaaaa</li>
        <li>bbbbb</li>
        <li>ccccc</li>
    </ol>
    <input type="text" name="">
    <input type="number" name="">
    <input type="password" name="">
    <!-- 单选框 -->
    性别：
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <br>
    <!-- 复选框 -->
    <input type="checkbox" name="">
    <a href="https://www.baidu.com">
        百度一下
    </a>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

 

（1） css的文字属性标签

文字颜色： color: #ffffff;

文字样式： font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

字体大小：font-size:16px;

文字行高： line-height: 30px;

文字粗细： font-weight: bold;(粗体) lighter;(细体) normal;(正常)

文字修饰： text-decoration:line-through; (加删除线)overline;(加顶线)underline;(加下划线)none;(无修饰线)

对齐方式： text-align:right; (文字右对齐)left;(文字左对齐)center;(内部元素居中)justify;(文字分散对齐)
（2） css常用属性

width:宽度

height:高度

background:背景(是一个复合属性)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #div1{
              background-image:url(https://pic.sogou.com/d?query=图片&forbidqc=&entityid=&preQuery=&rawQuery=&queryList=&st=&did=1) no-repeat;
              /*background-repeat: no-repeat;   平铺*/
              /*background-y no-repeat*/
              /*background-image:url(https://pic.sogou.com/d?query=图片&forbidqc=&entityid=&preQuery=&rawQuery=&queryList=&st=&did=1) no-repeat;*/
              color: red;
              font-size: 20px;
              font-weight: 700;}
     #div2{
width: 200px;
height: 50px;
background: lightblue;
              }
    </style>
</head>
<body>
<div id="div1">
    时维九月,叙述三秋
</div>
<div id="div2">滕王高阁临江渚</div>
</body>
</html>

 

posted @ 2021-11-07 16:42  物联网2003齐树瑞  阅读(143)  评论(0)    收藏  举报