html内容

目录

1.html的框架

2.使用注释

3.标题

4.段落标签

5.换行标签

6.水平线标签

7、文本格式化标签

8.无语义标签

9、图片标签

10.视频标签

11.音频标签

12.链接标签

13.锚链接

14.有序列表 

15.无序列表

16.自定义列表

17.iframe框架

18.特殊字符

19.元素显示模式

20.表格标签:

22.details

23.tabindex

23.表单的基本结构

 24.常见的表单元素

25.html的全局属性


1.html的框架

使用 "!" 自动生成框架

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

2.使用注释

CTRL+/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--这里写注释-->
</body>
</html>

3.标题

<h1> ~ <h6>   标题标签    h1-h6逐渐变小  独占一行


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>

<body>
    <h1>我是标题</h1>
    <h2>我是标题</h2>
    <h3>我是标题</h3>
    <h4>我是标题</h4>
    <h5>我是标题</h5>
    <h6>我是标题</h6>


</body>

</html>

效果图:

 9d4d7462689b47b4bef1d41421ea0606.png

4.段落标签

<p></p>生成的内容会自动空一行


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<p>这是一个自然段</p>
<p>这是第二个自然段</p>
   
</body>

</html>

效果图:

5acc7435cee241eba61d66a642ecd858.png

5.换行标签

在需要换行的部分后面+</br>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   这里需要换行</br>
    换行结果
</body>

</html>

效果图:

b43a40ad366f4fcb9a6da54051d2a758.png

6.水平线标签

在需要水平线的地方使用<hr>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>这是标题</h2>
<hr>
这是内容    

</body>

</html>

7、文本格式化标签

<strong> </strong><b> </b>都是加粗的意思

<em> </em>是斜体

<i style="color:red";> </i>是斜体

<ins> </ins><u> </u>都是下划线的意思

<del> </del>是删除线的意思


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>   <strong>这里加粗</strong>,<b>这也是加粗</b>   </p>
   <p>   <em>这里是斜体</em>   </p>
   <p>   <i style="color: rgb(205, 192, 255);">这里是变色</i>   </p>
   <p>    <ins>这里是下划线</ins>   <u>这也是下划线</u>   </p>
    <p>   <del>这里显示删除线</del> 如某宝常用的: <del>999</del> 9   </p>
</body>

</html>

效果图:

 f017cb1ed47a46f3a4754027b7d762ef.png

8.无语义标签

多用于网页布局

<div>  </div> 独占一行

<span>  </span> 一行可存在多个


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
  <!-- div独占一行 -->
    <div>这是第一行</div>
    <div>这是第二行</div>
    <div>这是第三行</div>
   <!-- span一行可存在多个 -->
    <span>a</span>
    <span>b</span>
    <span>c</span>
</body>

</html>

效果图:

6b8d96440bcc40c8998a21a3e7fb2615.png

9、图片标签

img   是图像嵌入元素

src  指向图片位置 (可以是在电脑本地中的相对路径绝对路径,也可以是在网络上的图像链接

alt:图片地址发生错误时,用来提示的字

title:鼠标经过时,显示的文字

    border : 边框的大小

    width:宽度

    height:高度  


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <img src="这里是一个错误的地址" alt="这是当图片地址发生错误时,用来提示的内容 " border="20"> </p>
    <img src="https://img1.baidu.com/it/u=3113560374,3342883877&fm=253&fmt=auto&app=120&f=JPEG?"  height="400px" title="这是鼠标经过时,显示的文字" border="20">
</body>

</html>

效果图: fddbc805c6db4edcba4d492c456ed03a.png

10.视频标签

video : 视频标签

width="400px" : 宽度

height="200px"  : 高度

 controls :  控件(控制播放的媒体 (视频或音频) 的控制条是否显示)

 autoplay : 自动播放(大多数的浏览器不允许视频在有声音的情况下自动播放,所以自动播放需要在静音的前提下才可以实现)

 muted :    静音播放

 poster : 等待加载时的显示图片

loop :   在视频播放结束的时候,自动返回视频开始的地方,继续播放。

src: 和图片标签中的src相似


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频标签</title>
</head>

<body>
    <video src="image/video.mp4" controls autoplay muted poster="首页.jpg" width="400"height="200" loop></video>
</body>

</html>

11.音频标签

 audio : 音频标签

<注>该标签和视频标签相似,详情请看视频标签


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio src="image/music.mp3" controls muted autoplay loop></audio>
</body>

</html>

12.链接标签

<a> </a> :  (a元素也称元素)可以通过它的 href 属性创建通向其他网页、地址、同一页面内的位置或任何其他 URL(我们所谓的网址) 的超链接。

href  : 用于指定目的url

tel:  使用 URL 链接到一个电话号码

mailto:  使用 URL 链接到一个邮箱地址

<注> 链接默认当前窗口打开


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="http://www.baidu.com/" >这里是链接的名字</a>

    <a href="tel:+123456789">链接电话号码</a>
    <a href="mailto:m.bluth@example.com">链接邮件</a>
</body>

</html>

效果图:

 6ea5c860b84c4ba08a659b4f345d2d69.png

13.锚链接

id :  类似于身份证,是唯一标识,只能使用一次

<a href="#id"> </a>  :  用于跳转的锚链接

<div id="id"> </div>  : 点击锚链接后跳转的位置


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚链接</title>
</head>

<body>  
   填充的内容<br />   填充的内容<br />
    <a href="#这里写id">点击这里跳转至目的地</a> <br>
填充的内容<br />
填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   填充的内容<br />   

    <div id="这里写id">这里是跳转的目的地</div>   填充的内容<br />   填充的内容<br />   填充的内容<br />
    


</body>

</html>

14.有序列表 

ol和li的嵌套(每一项数据单独成行)

type :  若不写,默认以数字排列


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   
    喜欢的食物
    <ol type="a">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>奶茶泡饭</li>
    </ol>
</body>

</html>

效果图:

 228703e1fd7949f3834bcb3b8d1b9394.png

15.无序列表

type : 调整列表前面的图案类型(和有序列表的有一些区别)eg:disc 实心圆;circle 表示空心圆;square 表示方块

当涉及到多层嵌套时,为相互区分会改变前面的图案


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    你喜欢的明星是?
    <ul >
        <li>丁真</li>
        <li>法外狂徒张三</li>
        <ul>
          <li>简亨</li>
          <li>彭涵</li> 
        </ul>
        <li>罗翔</li>
    </ul>
</body>

</html>

效果图:

 3ff69f72951043c5bda938de593c2ae3.png

16.自定义列表

dl,dt,dd嵌套使用 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <dl>
        <dt>
            你们喜欢的明星是?
        <dd>
            张三
        </dd>
        <dd>
            李四
        </dd>
        <dd>
            王五
        </dd>
        </dt>

    </dl>
</body>

</html>

效果图:

 ed1419f20fcd42f39d62a6c637bf9f5e.png

17.iframe框架

将另一个 HTML 页面嵌入到当前页面中(目前有很多网站不允许嵌套)

和图片标签类似,该框架也可以调整大小

1.打开网页直接出现嵌套


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    我的网页</p>
    <iframe src="https://www.taobao.com" width="400px" height="200"></iframe>
    


</body>

</html>

效果图:

 a4dad4f37d7d45f1a66d6d4d496c1e0b.png

2.点击链接后再出现嵌套

frameborder(已弃用,不推荐) : 值为1(默认值)时,显示此框架的边框。值为0时移除边框。

target : 控制打开链接后的位置

name和target 配合标定跳转的目标



<!DOCTYPE html>
<html lang="en">

<head><script type="text/javascript" src="/___vscode_livepreview_injected_script"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <a href="https://www.taobao.com" target="nn">去淘宝</a>
    <iframe name="nn" frameborder="0" width="800px" height="200px"></iframe>


</body>

</html>

效果图:

f72a1ffb270546b890394310b8caa8af.png

18.特殊字符


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
       小于符号 : &lt;<p>
        大于符号: &gt;</p>
        空格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        填充字符</p>
        度:&deg;
    </div>
</body>

</html>

 效果图:

 5d9f943987fd46eab1b7f7ce468a2a92.png

19.元素显示模式

块元素 : 独占一行  ;  如div ; 宽  高 内外边距都可设置

行内元素 :一行可存在多个  ;  如span ;宽 高 内边距不可设置

行内块元素:一行可存在多个 ;如input ; 宽 高 内外边距都可设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>牛逼</div>
    <span>nb</span>
</body>
</html>

效果图:

 b2484cf6a0814efdb3dc605a12a090a8.pngf2eb6cec4a8144cb8f1b1f8858f29dc6.png

 可以看出div中的内容占了一行的位置;span中的内容只占了字符所需的位置

20.表格标签:

259c2a2343074a77b497fd207d99831d.jpeg

border(只控制最外围边框厚度大小)

width、height  :宽  高  (tbody中的值是底线,只高不低)

cellspacing   : 单元格与单元格之间的距离

align   : 数据水平方向位置

valign  :  数据垂直方向位置

 colspan="5"  : 将横排的5个单元格合并

rowspan="2"   :  将竖排的2个单元格合并

​​​​​​
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- td   跨行:rowspan
              跨列:colspan
    -->
    <table border="1px" width="800px" cellspacing="0">
        <!-- 表头 rows  data-->
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>王鑫宇</td>
                <td>男</td>
                <td>18</td>
                <td>汉</td>
                <td>党员</td>
            </tr>
        </tbody>
        <tfoot>
            <tr align="right">
                <td colspan="5">共计:4人</td>
            </tr>


        </tfoot>


    </table>
</body>

</html>

效果图:efdb9541a1704598afb7522be933ed14.png

22.details

<tetails>  : 展开后的内容

<summary> :   展开前的内容


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <details>
        <summary>有志青年</summary>
        我们这里都是优秀的有志青年
    </details>
</body>

</html>

效果图:

a687da6426554c1996b36ef015ddf6bc.png

23.tabindex

<tabindex>  :  让本不能tab遍历获取焦点的元素可以获取  可以为负数(不可以使用tab聚焦),0(按顺序使用tab聚焦),正数(tab优先聚焦且数字越小越优先)


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <a href="www.baidu.com">去百度</a>
    <div>我是第一个盒子</div>
    <div tabindex="1">我是第2个盒子</div>
    <div>我是第3个盒子</div>
    <div>我是第4个盒子</div>

</body>

</html>

23.表单的基本结构

表单:网页交互区,收集用户信息

<form>  :  表单都应写在< form>中

action :  指向表单中数据提交地址

name: 所有表单的必有属性

method:提交方式 

<button> :  按钮

/s  :  百度的搜索框


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单的基本结构</title>
</head>

<body>
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <button>提交</button>
    </form>
</body>

</html>

 24.常见的表单元素

文本框: value=""  (刚打开时文本框里的内容)  placeholder=""   :  文本框中的提示词

单选框、多选框 : 一组单/多选中name必须相同, 必须写value   , label : 标签  , chicked : 默认选择

隐藏域  : 在网页无法看到,可用value输入内容

下拉菜单 : selected :默认选择


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见的表单元素</title>
</head>

<body>
    <form action="#">

        <!-- 文本框    maxlength:最大长度-->
        用户名:<input type="text" name="user" value="" maxlength="6" placeholder="请输入用户名:"><br />

        <!-- 密码 -->
        密码:<input type="password" name="pwd"><br />
        
        <!-- 单选框 -->
        <input type="radio" name="gender" value="nan">男
        <input type="radio" name="gender" value="nv">女<br />
        
        <!-- 多选框   label标签-->

        <input type="checkbox" name="food" id="liulian"><label for="liulian">吃榴莲</label>
        <label><input type="checkbox" name="food">吃臭豆腐</label>
        <!-- checked默认选中 -->
        <input type="checkbox" name="food" checked>吃肥肉
       
         <!-- 隐藏域 -->
        <input type="hidden" name="hid" value="这里的内容只有自己能看到">
       
         <!-- 确认按钮 -->
      <button type="submit"></button> 
       
         <!--重置按钮 -->
        <input type="reset">

        <!-- 普通按钮 -->
        <input type="button">
       
         <!-- 文本域 -->
        <textarea cols="20" rows="10" maxlength="200
        ">
        </textarea><br />
       
         <!-- 下拉菜单 -->
        <select name="jiguan" id="">
            <option value="南京">南京</option>
            <!-- selected下拉菜单的默认选中 -->
            <option value="成都" selected>成都</option>
            <option value="西安">西安</option>

        </select>



        <input type="submit">



    </form>

</body>

</html>

效果图  : 

d6b8e4e5503c406dabae1d647d8cbd3b.png

25.html的全局属性


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- id身份证号,在一个页面中只能出现一次 -->
    <div id="one"></div>

    <!-- class   一类 可以出现多个-->
    <div class="pink">我是哟个盒子</div>
    <div class="pink">我是哟个盒子</div>

    <!-- accesskey  设置快捷键 -->
    <form action="#">
        <input type="text" name="a">
        <button accesskey="s">提交</button>
    </form>

    <!-- style -->
    <!-- data-*  自定义属性 -->
</body>

</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值