前端开发 --初识html

html骨架

html骨架结构由四个标签组成：
html规定了网页的整体。
head规定了网页的"头部",包含字符编码等等信息。
title规定了网页的标题。
body规定了网页的"身体"。
复制代码
复制代码
<!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>
复制代码

 

复制代码
    <!--  形成独立空间  -->
    <!--  span标签-->
    <span style="color:red;font-size:50px">demo</span>
    <span style="color:yellow;font-size:50px">demo</span>
    <span>index</span>
复制代码
   <!-- div竖着布局的标签-->
    <div>标签</div>
    <div>标签</div>
    <div>标签</div>

 

常用标签

div与span的区别:

  • div是一个块级元素，会自动占据一行，而span是一个行内元素，不会自动换行。
  • div用于包裹比较大的结构和布局，而span用于包裹文本或者其他行内元素

 

段落标签p在创建时会自动生成空白,用于形成段落,也可用于换行

复制代码
    <!-- 段落标签 p -->
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>

 

a标签

复制代码
复制代码
     <!-- 超链接标签 a ,herf 设置资源路径 target设置资源打开方式 _self在本窗口打开 ——black资源在新窗口打开 窗口名 在指定窗口打开-->

     <a href="https://www.bilibili.com/" target="aa">点击跳转</a>
     <!-- 图片标签 src资源路径 alt当图片无法加载时展示alt里边的内存 width图片的宽 height图片的高-->
     <!-- 绝对路径 被访问的资源在磁盘当中的绝对位置 -->
     <!-- 相对路径 访问资源与被访问资源之间的关系
        兄弟关系 根据文件名直接访问
        叔侄关系 src='img/OIP-c.jpg'-->
    <!-- 锚点标签-->
　　
　　　　 <a href="#aa" style="position:fixed;right:100px;bottom:200px">跳转到顶部</a>
    　　<a href="#bb" style="position:fixed;right:100px;bottom:150px">跳转到div标签</a>
    　　<a href="#bb" style="position:fixed;right:100px;bottom:100px">跳转到p标签</a>
复制代码
 
复制代码

列表标签

复制代码
<ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

表格标签

复制代码
复制代码
 <!--th加粗居中的单元格
        border='1'表示表格有边框
        width height
        celipadding单元格的填充度
        cellspacing单元格之间的距离 0表示单元格挨在一起
        
        thead tfoot tbody
        单元格合并
        rowspan行合并
        colspan列合并
    -->
    <table border="1" cellspacing="0">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
        </tr>
    </table>
复制代码

 

 

复制代码
复制代码
<!--供收集用户信息的标签-->
    <form >
        <input type="text">单行文本框<br><br>
        <input type="password">密码框<br><br>
        <input type="radio" name="sex">男生<input type="radio" name="sex">女生 单选框<br><br>
        <input type="checkbox">篮球<input type="checkbox">足球<input type="checkbox">羽毛球<br><br>
        <input type="file">文件选择器<br><br>
        <input type="color">颜色拾取器<br><br>
        <input type="date">日期<br><br>
        <input type="datetime-local">日期时间<br><br>
        <input type="week">周选择器<br><br>
        <input type="range" min="0" max="100" value="10">滑块<br><br>
        <input type="number" min="0" value="50" step="5">数字<br><br>
        <select>
        <option value="">数学</option>
        <option value="">英语</option>
        <option value="">语文</option>
        </select>下拉框<br><br>
        <textarea cols="40" rows="10"></textarea>多行文本域<br><br>
        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
    </form>
    <br><br>
复制代码

 

复制代码
复制代码
 <!--音频
        controls手动播放
        auto play自动播放
        loop循环播放
    -->
    <!--<audio src='img/bj.mp3' autoplay loop></audio>-->
    <!--视频
        controls手动播放
        auto play自动播放
        loop循环播放
        width="200px height="100px"
    -->
    <video src="img/test.mp4" controls width="200px" height="100px"></video>
复制代码

 

posted @   茴香儿  阅读(16)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
展开