前端基础_01

w3c规范

认识html
<!DOCTYPE html>
<html>
    <head>
        <!-- 设置编码集 -->
        <meta charset="utf-8" />
        <!-- 设置网站标题 -->
        <title>这是前端内容</title>
        <!-- 设置网站图标 -->
        <!-- http://www.bitbug.net/  制作小图标的网址-->
        <link href="https://g.csdnimg.cn/static/logo/favicon.ico" rel="shortcut icon" />
        <!-- 设置搜索引擎抓取页面的关键字 -->
        <meta name="keywords" content="html再线学习 html课外学习 html线下学习" />
        <!-- 设置搜索引擎抓取页面的描述信息 -->
        <meta name="description" content="html再线学习 css在线学习 js再线学习 前端再线学习" />
        <!-- 设置几秒之后页面跳转 -->
        <!-- <meta http-equiv="refresh" content="3;url=http://www.baidu.com" /> -->
    </head>
    <body>
            <!-- 一个及多个空白符,都会被理解成一个空白符 -->
            1111       3333     343434                   234234
            <!-- 换行标签 -->
            <br />
            5<d   c>10
            <!-- 分割线标签 -->
            <hr />
            字符实体:使用字符实体来表达实际的字符含义;
                &nbsp;  使用字符实体表达多个空格
                例子:
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11111
                <br />
                <  : &lt; 小于号  &gt; 大于号
                例子:
                    5&lt;d     c&gt;10
            
            <!-- 格式化预览标签 原型化输出所有内容 <pre> -->
            <pre>
            333
           +444
           ------
            777
            </pre>
    </body>

</html>
html结构
<!DOCTYPE html>
<html>
    <head>
        <!-- 设置编码集 -->
        <meta charset="utf-8" />
        <!-- 设置网站标题 -->
        <title>这是前端内容</title>
        <!-- 设置网站图标 -->
        <!-- http://www.bitbug.net/  制作小图标的网址-->
        <link href="https://g.csdnimg.cn/static/logo/favicon.ico" rel="shortcut icon" />
        <!-- 设置搜索引擎抓取页面的关键字 -->
        <meta name="keywords" content="html再线学习 html课外学习 html线下学习" />
        <!-- 设置搜索引擎抓取页面的描述信息 -->
        <meta name="description" content="html再线学习 css在线学习 js再线学习 前端再线学习" />
        <!-- 设置几秒之后页面跳转 -->
        <!-- <meta http-equiv="refresh" content="3;url=http://www.baidu.com" /> -->
    </head>
    <body>
            <!-- 一个及多个空白符,都会被理解成一个空白符 -->
            1111       3333     343434                   234234
            <!-- 换行标签 -->
            <br />
            5<d   c>10
            <!-- 分割线标签 -->
            <hr />
            字符实体:使用字符实体来表达实际的字符含义;
                &nbsp;  使用字符实体表达多个空格
                例子:
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11111
                <br />
                <  : &lt; 小于号  &gt; 大于号
                例子:
                    5&lt;d     c&gt;10
            
            <!-- 格式化预览标签 原型化输出所有内容 <pre> -->
            <pre>
            333
           +444
           ------
            777
            </pre>
    </body>

</html>
常见标签
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> 常见标签 </title>
    </head>
    <body>
        <h1>一级标签</h1>
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>

        <hr />
        <!-- 下角标 sub -->
        h20 => h<sub>2</sub>0
        <br />
        co2 => co<sub>2</sub>
        <br />
        <!-- 上角标 sup -->
        x2 = 100  => x<sup>2</sup> = 100
        <!-- p 是段落标签 -->
        <p>这是第一个段落</p>
        <p>这是第二个段落</p>
        <hr />

        <!-- (了解)逻辑强调 带有语义话的含义 [w3c标准] 推荐-->
        <strong>川普是我的偶像</strong>
        <em>我的爱人</em>
        <!-- (了解)物理强调 带有语义话的含义 [非w3c标准] -->
        <b>川普是我的偶像</b>
        <i>我的爱人</i>
    </body>

</html>
标签种类
<!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>
    <!--
        标签的种类:
            (1) 行内元素标签: 不能独占一行,不能设置宽和高,横向排列
                例子: span a
            (2) 块状元素标签: 独占一行,可以设置宽和高,纵向排列
                例子: div h1~h6 p
            (3) 行内块状标签: 不能独占一行,能设置宽和高,横向排列
                例子: button img input
    span 和 div 都属于无语义化标签,用来布局页面,划分页面结构
    -->

    <!-- 行内元素 -->
    <span style="width:200px;height:200px;background-color:yellowgreen;">我爱你 
        <span>奥斯托夫罗斯基</span>  
    </span>  111

    <!-- 块状元素 -->
    <div style="width:100%;height:200px;background-color:seagreen;">我是网页的头部</div>
    <div style="width:100%;height:200px;background-color: skyblue;">我是网页的身体</div>
    <div style="width:200px;height:200px;background-color: tan;">我是网页的脚部</div>

    <!-- 行内块状标签 -->
    <button style="width:100px;height:20px;background-color: salmon;">按我1</button>
    <button style="width:100px;height:20px;background-color:sandybrown;">按我2</button>
    <button style="width:100px;height:20px;background-color:seagreen">按我3</button>

</body>
</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>
    <!-- 无序列表 *** -->
    <!-- square 方块 circle 空心圆 -->
    <ul type="square">
        <li>姜子牙</li>
        <li>我和我的家乡</li>
        <li>八百</li>
        <li>唐人街探案3</li>
    </ul>
    
    <!-- 有序列表 -->
    <!-- type="i" 指定罗马数字 -->
    <ol start=10 type="i">
        <li>姜子牙</li>
        <li>我和我的家乡</li>
        <li>八百</li>
        <li>唐人街探案3</li>
    </ol>

    <!-- 定义列表 -->
    <dl>
        <!-- dt定义标题 -->
        <dt>女生曾经说过的谎言:</dt>
        <!-- dd定义内容 -->
        <dd>不要</dd>
        <dd>你真坏</dd>
        <dd>你是个好人</dd>
        <dd>我给你介绍个漂亮的小姑娘</dd>
    </dl>

</body>
</html>
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a 超链接标签</title>
</head>
<body>
    
    <!--
    GET   - 从服务端请求数据 (可以携带参数来获取数据,参数会暴露在地址栏上,传参大小受浏览器限制,控制在2k~8k范围内,显式传值)
    POST  - 向服务端发送数据 (发送数据时候不限制发送数据的大小,隐式传值)
    -->

    <!-- target="_self" 代表本页面跳转 target="_blank" 新窗口跳转 -->
    <a href="./2.html" target="_self">点我1</a>
    <a href="http://www.baidu.com" target="_blank">点我2</a>
    <a href="http://www.baidu.com/s?wd=王文" target="_blank">点我3</a>
    <a href="./2.html?a=1&b=2&c=3&d=4" target="_blank">点我4</a> <!--地址栏传值 -> get显式传值-->

    <!-- 刷新页面 -->
    <a href="">点5</a>
    <!-- 不刷新页面 -->
    <a href="#">点6</a>
    <!-- 把数据扔到a连接中的href属性中 , 默认下载操作 -->
    <a href="VSCodeUserSetup-x64-1.51.0.exe">点7</a>
</body>
</html>

a链接跳锚点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> a链接 跳锚点 </title>
</head>
<body>
    <ul>
        <li><a href="#a1">第一章</a></li>
        <li><a href="#a2">第二章</a></li>
        <li><a href="#a3">第三章</a></li>
    </ul>

    <a id="a1">第一章内容</a>
    <p style="width:500px;height:1000px;background-color: silver;">孙悟空三打白骨精</p>

    <a id="a2">第二章内容</a>
    <p style="width:500px;height:1000px;background-color:skyblue;">孙悟空怒锤红孩儿</p>
    
    <a id="a3">第三章内容</a>
    <p style="width:500px;height:1000px;background-color:tan;">孙悟空大闹凌霄殿</p>

    <a href="#">回到顶部</a>
</body>
</html>
img图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>img 图片标签</title>
</head>
<body>
    <!-- img 单独调整width或者height可以随着比例进行缩放,如果同时指定有可能失真;  title属性设置图片的提示功能 -->
    <a href="https://baike.baidu.com/item/%E5%91%A8%E6%98%9F%E9%A9%B0/169917?fr=aladdin">
        <img src="zhouxingchi1.jpg" width="200px" height="200px;" title="周星驰" />
    </a>
    <img src="zhouxingchi1.jpg" width="200px" height="200px;" />
</body>
</html>

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

    <!-- 
    ### part1    
    table 表格  border 表框 width 宽度设置
    tr 表示一行
    th 表示标题加粗
    td 表示一个单元格 
    -->

    <table border=1 width="1000px;">
        <thead style="background-color: tan;">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>薪水</th>
                <th>部门</th>
            </tr>
        </thead>

        <tbody style="background-color: teal;">
            <tr>
                <td>王文</td>
                <td>18</td>
                <td>10万</td>
                <td>python</td>
            </tr>

            <tr>
                <td>王伟</td>
                <td>20</td>
                <td>11美元</td>
                <td>开发部门</td>
            </tr>

            <tr>
                <td>王致和</td>
                <td>22</td>
                <td>100万</td>
                <td>臭豆腐研发部门</td>
            </tr>
        </tbody>
        <tfoot style="background-color: thistle;">
            <tr>
                <td>lianxi1</td>
                <td>lianxi2</td>
                <td>lianxi3</td>
                <td>lianxi4</td>
            </tr>
        </tfoot>
    </table>

    <hr  style="width:20px;height:100px;"/>
    <!-- 
        colspan  横向合并
        rowspan 纵向合并 
    -->
    <table border=1 width="1000px;">
        <thead style="background-color: tan;">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>薪水</th>
                <th>部门</th>
            </tr>
        </thead>

        <tbody style="background-color: teal;">
        <tr>
            <td colspan=2>123</td>
            <td>10万</td>
            <td rowspan="3">销售</td>
        </tr>

        <tr>
            <td>王伟</td>
            <td>20</td>
            <td>11美元</td>

        </tr>

        <tr>
            <td>王致和</td>
            <td>22</td>
            <td>100万</td>

        </tr>
        </tbody>

        <tfoot style="background-color: thistle;">
            <tr>
                <td  colspan=4>lianxi1</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table 表格的方向属性</title>
</head>
<body>
    <!-- 
    水平方向设置 align : left center right  
    垂直方向设置 valign: top middle bottom 

    cellspacing td 与td 之间的间距
    cellpadding td 与其中内容之间的间距

    -->
    <table border=1 width="1000px;" height="200px;" cellspacing = "10" cellpadding="10">
        <tr align="center" valign="top">
            <td>王致和</td>
            <td>蓝色</td>
            <td>踢球</td>
            <td>江西</td>
        </tr>
        <tr align="center" valign="middle"">
            <td>王致和</td>
            <td>蓝色</td>
            <td>踢球</td>
            <td>江西</td>
        </tr>

        <tr align="center" valign="bottom">
            <td>王致和</td>
            <td>蓝色</td>
            <td>踢球</td>
            <td>江西</td>
        </tr>


    </table>
</body>
</html>
iframe子窗口
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> iframe 子窗口</title>
</head>
<body>
    <iframe src="" name="isme" width="1000px" height="200px;"></iframe>
    <hr />
    <a href="http://www.baidu.com" target="isme">点我跳转百度</a>
    <a href="3.html" target="isme">点我跳转3.html</a>
    <a href="4.html" target="isme">点我跳转4.html</a>
</body>
</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>
    <!-- https://www.w3school.com.cn/html/index.asp  w3c school 手册 -->

    <video src="ceshi.mp4" controls = "controls" style="width:100px;">
        抱歉~! 您的浏览器不支持,该扔了
    </video>
    <audio src="潮汐-她的城市.mp3" controls = "controls">
        抱歉~! 您的浏览器不支持,该扔了
    </audio>
</body>
</html>
form标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form表单<</title>
</head>
<body>
    <!-- action 表示提交的数据地址 
    method 表示数据以什么样的形式提交     
        get    显式获取数据(参数在地址栏上,参数大小在2k~8k左右)
        post   隐式提交数据(参数不在地址栏,参数大小没有限制) 

    input 是行内块状元素
    type  指定input的类型
    name  指定input的名字
    value 指定input的默认值
    -->
    <form action="" method="">
        手机号:<input type="text" name="phone" value="王文"  />
        <br />
        密码:  <input type="password" name="pwd" value="李四" style="width:200px;height:50px;" />
        <br />       
        <input type="submit" value="提交" />
    </form>
</body>
</html>
单选框 , 复选框, 下拉框
	<form action="" method="">
        <!-- 单选框 radio 多选一 name名字要一致  checked:默认选中 -->
        <input type="radio" name="sex" value="m" id="sex1"  /> <label for="sex1" >男性</label>
        <input type="radio" name="sex" value="w" id="sex2" checked /> <label for="sex2" >女性</label>
        
        <hr />
        <!-- 复选框 checkbox 多选多 name名字要一致 -->
        <input type="checkbox" name="food" value="banana" checked />香蕉
        <input type="checkbox" name="food" value="huanggua" />黄瓜
        <input type="checkbox" name="food" value="qiezi" checked />茄子
        <input type="checkbox" name="food" value="donggua" />冬瓜
        <hr />
        
        <!-- 下拉框 select 多选一 selected 默认选中, disabled 无法选中-->
        <select name="city" >
            <option value="beijing"  >北京人</option>
            <option value="xian" selected>西安人</option>
            <option value="dalian"  >大连人</option>
            <option value="fuzhou">福州人</option>
            <option value="zhengzhou" disabled >郑州人</option>
        </select>

        <hr / >
        <input type="submit" value="点我" />

文件上传
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <!-- 文件上传 -->
        头像:<input type="file" name="myfile" />
        <hr/>
        <!-- 大段文本框 -->
        <textarea name="info" style="width:100px;height:100px;background-color:tan;" >请填写相关数据</textarea>
        <hr/>
        <!-- 隐藏的表单框 => 隐藏要修改的数据id -->
        <input type="hidden" name="sid" value="13" />
        <hr/>
        <input type="submit" value="提交"/>
    </form>

</body>
input属性
<body>
    <!-- 
    placeholder  灰色输入提示
    required     必填
    readonly     只能读不能改   可以被提交
    disabled     只能读不能改   不会被提交
    size         设置输入框的大小
    maxlength    输入框最多可以输入多少字符
    minlength    输入框最少需要输入多少字符
    autofocus    自动获取焦点, 整个页面只能有一个
    tabindex     设置tab的切换顺序 
    -->
    <form action='' method="" >
        
        用户名:<input type="text" name="username" placeholder="请输入用户名" required tabindex=5 />
        <br />
        密码: <input type="password" name="pwd" tabindex=4 >
        <br />
        年龄: <input type="text" name="age" value="18" readonly tabindex=3 />
        <br />
        邮箱: <input type="text" name="email" value="123463922@qq.com" disabled   />
        <br />
        班级: <input type="text" name="classroom" size=100 maxlength = 5 minlength=2  tabindex=2/>
        <br />
        国籍: <input type="text" name="country" autofocus tabindex=1 />
        <br />
        <input type="submit">

    </form>
    
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值