HTML

最新推荐文章于 2024-07-12 00:07:26 发布

0&1 * 1

最新推荐文章于 2024-07-12 00:07:26 发布

阅读量179

点赞数

分类专栏： Web 文章标签： HTML

本文链接：https://blog.youkuaiyun.com/weixin_44820920/article/details/100568055

版权

Web 专栏收录该内容

2 篇文章

订阅专栏

一、HTML介绍

1）Html的基本内容
在这里插入图片描述
2）基本结构

3）基本模板
在这里插入图片描述

二、标签

1）标签
在这里插入图片描述
2）样式及属性

3）完整内容

4)文件各部分标签详解

5）块级标签

标题标签（h1~h6）
段落标签（p)
列表标签
<!--ul>li*3  unordered list-->    
<ul>        
<li>苹果</li>        
<li>梨子</li>       
<li>香蕉</li>    
</ul>    
<ol>        
<li>乒乓球</li>        
<li>游泳</li>        
<li>画画</li>    
</ol>    
<dl>    
<!-- definition list -->        
<dt>湖南省</dt>        
<dd>长沙市</dd>        
<dd>岳阳市</dd>        
<dt>湖北省</dt>        
<dd>黄冈市</dd>        
<dd>武汉市</dd>    
</dl>    
div标签：页面布局本身是没有任何样式，div对页面进行基本布局
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>work_1</title>
    <style>
        #top{
            height:64px;
            background:black;
        }
        #concent{
            height:800px;
            background:antiquewhite;
        }
        #bottom{
            height:128px;
            background:black;
        }
    </style>
</head>
<body>
<div id="top">top</div>
<div id="concent">concent</div>
<div id="bottom">bottom</div>

</body>
</html>

6）有序、无序、定义列表标签效果图
在这里插入图片描述

7）行内标签

粗体/斜体标签：<b><strong>/<i><em>
图片标签 <img src="1.png" alt="下载失败替换文字" title="提示文字
超链接a：实现页面跳转
 <a href="javascript:void(0);">我想要a标签的样式，但是我不想让他跳转</a>
 <a href="https://www.baidu.com" title="实现网页跳转" target="_blank">点击我，可以去百度哦</a> 新的页面打开
 <a href="#test1" title="页面内跳转">第一章</a>
 <a href="#test2" title="页面内跳转">第二章</a>
 <a href="#test3" title="页面内跳转">第三章</a>
 <a href="#" <h3 id="test1">第一章</h3></a>
 <p>农家乐覅京东方科技法律</p>
  <a href="#" <h3 id="test2">第一章</h3></a>
 <p>农家乐覅京东方科技法律</p>
  <a href="#" <h3 id="test3">第一章</h3></a>
 <p>农家乐覅京东方科技法律</p>
 
 span 标签：本身没有样式。局部文字特效
    <meta charset="UTF-8">
    <title>photo</title>
    <style>
        span{
            color:red;
            font-size:50px;
        }
    </style>
</head>
<body>
不错哦，你<span>可以</span>的、
</body>
</html>

三、特殊符号
1)符号
在这里插入图片描述

&lt;>   <br> 换行    &gt;<           &emsp字符宽      &nbsp 空格宽

四、表格

1）表格
在这里插入图片描述
2）整体结构

 <style>
        table{
            display:table;
        }
     td{
         border:1px solid black;
         width:60px;
         color: #165;
     }
    </style>
</head>
<body>
<table style="border-collapse:collapse">
    <caption>表格名</caption>
    <thead>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>地域</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>曹操</td>
        <td>男</td>
        <td>52</td>
        <td>魏</td>
    </tr>
    <tr>
        <td>刘备</td>
        <td>男</td>
        <td>45</td>
        <td>蜀</td>
    </tr>
    <tr>
        <td>孙权</td>
        <td>男</td>
        <td>28</td>
        <td>吴</td>
    </tr>
     <tr>
        <td>关羽</td>
        <td>男</td>
        <td>30</td>
        <td>蜀</td>
    </tr>
    </tbody>
</table>
</body>

在这里插入图片描述

```

五、表单

1）表单
在这里插入图片描述
2）属性

在这里插入图片描述

3）标签

<style>
        .yhm{
            font-family: 仿宋;
            font-size: 18px;
            color: lightslategrey;
        }
        input{
            border-radius:5px;
        }
        .mm{
            font-family: 仿宋;
            font-size: 18px;
            color: lightslategrey;
        }
        .xb{
            font-family: 仿宋;
            font-size: 18px;
            color: lightslategrey;
        }
        .ah{
            font-family: 仿宋;
            font-size: 18px;
            color: lightslategrey;
        }
        .sc{
            font-family: 仿宋;
            font-size: 18px;
           color: gray;
        }
        .sc input{
             border-radius:40px;
            color: lightslategrey;
            font-size:15px;
        }
        .dz{
             font-family: 仿宋;
            font-size: 18px;
            color: lightslategrey;
        }
        select{
             border-radius: 20px;
            color: palevioletred;
        }

        .jl{
              font-family: 仿宋;
            font-size: 18px;
           color: gray;
        }
        textarea{
            border-radius: 20px;
            color: palevioletred;
        }
        .tj{
            border-radius: 20px;
            color: palevioletred;
        }
        .cz{
            border-radius: 20px;
            color: palevioletred;
            margin-left: 35px;
        }
    </style>
</head>
<body>
     <from action="" method="get" enctype="multipart/form-data">
         <div class="yhm">
         <p>
             用户名：<input type="text" name="usr">
         </p>
         </div>
         <div class="mm">
         <p>
             密&emsp;码：<input type="password" name="psw">
         </p>
          </div>
         <div class="xb">
         <p>
             性&emsp;别：
             <input type="radio" name="gander" value="male">
             男
              <input type="radio" name="gander" value="male">
             女
              <input type="radio" name="gander" value="male">
             保密
         </p>
         </div>
         <div class="ah">
         <p>
             爱&emsp;好：
             <input type="checkbox" name="hobby" value="singing">
             唱歌
             <input type="checkbox" name="hobby" value="drawing">
             画画
             <input type="checkbox" name="hobby" value="dance">
             跳舞
         </p>
         </div>
         <div class="sc">
         <p>
             上传文件：
             <input type="file">
         </p>
         </div>
         <div class="dz">
         <p>
             地&emsp;址：
             <select name="addr" id="">
                 <optgroup label="宁夏">
                     <option value="yc" selected>银川市</option>
                     <option value="gy">固原市</option>
                     <option value="lw">灵武市</option>
                 </optgroup>
                 <optgroup label="甘肃">
                     <option value="lz">兰州市</option>
                     <option value="pl">平凉市</option>
                     <option value="qy">庆阳市</option>
                 </optgroup>
             </select>
         </p>
         </div>
         <div class="jl">
         <p>
             简&emsp;历：
             <textarea  name="profile" rows="10" cols="35">
             </textarea>
         </p>
         </div>
         <p>
             <input class="tj" type="submit" name="提交">
             <input class="cz" type="reset" name="重置">
         </p>
     </from>
</body>

四、背景样式

1）基本使用
在这里插入图片描述

2）选择器

<style>
        /*标签选择器*/
        p{
            font-size:15px;
        }
        /*class选择器*/
        .test1{
            color: palevioletred;
        }
        /*id选择器*/
         #test2{
            font-weight:bolder;
        }
        /*子代选择器*/
        .a1>span{
            color: aqua;
        }
        /*后代选择器*/
        .a1 span{
            font-size: 60px;
        }
       /*兄弟选择器*/
        .b1~p{
             color: greenyellow;
        }
        /*相邻选择qi*/
        .b1+p{
            font-size: 30px;
        }
        /*<!--全部选择器-->*/
        *{
           font-family: 細明體-ExtB;
            }
        /*属性选择器*/
        div[kk="v1"]{
            color: palevioletred;
        }
        div[class="c1"]{
            font-size: 23px;
        }
        /*分组选择器*/
        .d1,.e1{
            color: green;
        }

    </style>
</head>

<body>
    <p class="test1" id="test2">
        不一样
    </p>
<!--    后代选择器和子代选择器-->
    <div class="a1">
        <span>现在的自己</span>
        <p>
            连一百<span>块</span>都拿不出
        </p>
    </div>
<!--    兄弟选择器和相邻选择器-->
    <p>迷糊会</p>
    <div class="b1"></div>
        <p>你题号</p>
        <p>不错</p>
<!--/*属性选择器*/-->
    <div class="c1" kk="v1">
        可以呢
    </div>
<!--分组选择器-->
    <div class="d1">div</div>
    <p class="e1">p</p>
</body>
<a herf='javascript:void(0)'></a>

3）字体/文本

在这里插入图片描述

字体样式：{
            /*font-size: 字体大小（单位：px rem % em）;*/
            /*px:谷歌默认字体大小为16px，最小12px*/
            /*rem：16px*n*/
            /*em：父及字体*n*/
            /*%：父及字体*%*/
            /*font-weight: 字体粗细*/
            /*给值：100-900的整百数*/
            /*400=正常粗细，700=bold*/
            /*font-style: 字体样式*/
            /*normal：字体正常，默认*/
            /*italic/oblique：斜体*/
        }
      文本样式：{
            /*text-indent:2em;  首行缩进*/
            /*line-height: 32px;  行高*/
            /*line-height:height;     上下居中*/
            /*text-align: center;       左右居中*/
            /*text-transform: capitalize（首字母大写）;*/
            /*text-decoration: none（去掉下划线）;*/
            /*text-decoration:underline;下划线*/
            /*text-decoration:overline;上划线*/
            /*text-decoration:line-through;删除线*/
            /*white-space: nowrap;不换行*/
            /*overflow:hidden  超出部分隐蔽*/
            /*text-overflow   超出部分用显示*/
            
        } 
      
```4)背景

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905221254277.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgyMDkyMA==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905221305866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgyMDkyMA==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190905221316555.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgyMDkyMA==,size_16,color_FFFFFF,t_70)

背景

来也来，去也去

display：inline；将块级变行内
display：block；将行内变块级
display：inline-block：元素在一行内显示同是可以设置宽高