html学习

最新推荐文章于 2024-09-13 17:21:46 发布

qian_qh

最新推荐文章于 2024-09-13 17:21:46 发布

阅读量219

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qian4517/article/details/112168636

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Html5

世界知名浏览器厂商对HTML5都支持

html5+css3

W3C标准
W3C
World Wide Web Consortium (万维网联盟)
成立于1994年, Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
W3C标准包括
结构化标准语言(HTML、XML))
表现标准语言(CSS)
行为标准(DOM、ECMAScript )

html5

html->xhtml->html5

BS/CS

bs (browser server):通过浏览器访问的客户端，只需要浏览器就可以访问，用用体验不好，比如大型网络游戏

cs (client server):需要在本地安装客户端，用户体验比较好。

html5特点：

1.用户至上：语法问题不会在页面上显示出来，也不会导致程序崩溃

2.化繁为简: html5相比较之前的语法要简单的多

3.语义化: 新增了一些带有语义的标签专门用于加算机的识别

4.音频视频

开发工具：

notepad++、sublimextext、hbuilderX、webstorm、vscode

html入门案例

helloworld

<!DOCTYPE html>  <!--文档的声明、声明当前文档是一个html5的文档-->
<!--
html ： 超文本标记语言
-->
<html lang="en">  <!--html标签的根标签-->
<head> <!--文档的头部-->
    <meta charset="UTF-8">  <!--元数据信息-->
    <title>hello world</title> <!--标题部分-->
</head>
<body> <!--内容部分-->
<h1>这是第一个html页面</h1>
</body>
</html>

如何学好html

常用的标签 10个左右参照 word 文档

h1 h2 h3 h4 h5 h6 标题

b 加粗

i 斜体

table 表格

a 链接

…

css3 : 样式表

文本左对齐，行间距，字体颜色，字体大小，

语法标签的种类

1.双标签 <标签名称属性名称=“属性值” >内容部分</标签名称>

2.单标签 <标签的名称/>
标签的属性：都是 k-v型

标题

到

<!-- DOCTYPE: 告诉浏觉器,我们要使用什么规范-->
<! DOCTYPE html>
<!--html标签的根标签-->
<htmL Lang="en">

<!-- head标签代表网页头部-->
<head>

    <!--meta描述性标签,它用来描述我们网站的一些信息-->
    <!--meta - -般用来做SE0-->
    <meta charset="UTF-8">
    <meta name="keywords" content="狂神说Java ,西部开源">
    <meta name="description" content="来这个地方可以学习Java">

<!-- title网页标题-->
<title>我的第一个网 贝</title>
</head>
<!-- body标签代表网页主体主体-->
<body>
    hello world
</body>

</htmL>

网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--网页基本标签-->
<h1>标题一</h1>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<!--换行-->
<br>

<!--水平线 标签-->
<hr>

<b>粗体</b>
<i>斜体</i>

<!--特殊符号-->
&nbsp;空格
&gt; 大于号
<br>
&lt; 小于号
&copy;版权符号

</body>
</html>

超链接

<!--超链接 : href=目标资源-->
<a href="https:/www.baidu.com">访问百度网站</a>
<!--图像 src=目标资源(网络路径) alt=资源提示-->web01 

--------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--
基本用法：
1. 链接 点击跳转目标资源
2. 锚点 回到描点的位置 回到顶部
-->

<h1>
    <!--
    target :
    _blank = 新页面   常用
    _self = 当前页面   常用
    _top = 顶级页面
    _parent = 父级页面
    -->
    <a href="https://www.baidu.com" target="_blank">跳转百度</a>
</h1>

<h2 id="home">锚点</h2>
<!--写一段js脚本-->
<script>
    for (let i = 0; i < 100; i++) {
        document.writeln("hello <br>")
    }
</script>
<a href="#home">回到顶部</a>
<a href="demo01#top">跳转到其他页面的顶部</a>
    
    
<!--功能性链接，
邮件链接：mailto
QQ链接：搜索 QQ推广，推广工具，复制里面的代码
-->
<a href="mailto:123123@qq.com">联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2498680595&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:2498680595:51" alt="点击联系我" title="点击联系我"/></a>
    
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头部</title>
    <!--wd=美女-->
    <!--https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E7%94%B5%E8%84%91&fenlei=256&rsv_pq=a795df0b000c0673&rsv_t=7392xL6m2Y%2Bh5bqxUXQw3IkqGI6KB6IZJYdiwtmiUc9ZVamJy%2BCI6VWh3cE&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=16&rsv_sug7=101&rsv_sug2=0&rsv_btype=i&inputT=2261&rsv_sug4=2261-->
    <base href="http://www.baidu.com" target="_blank">
</head>
<body>

<a href="/s?wd=美女">超链接助你找到美女</a>

</body>
</html>

通过css演示表，做到和超链接同样的效果web01/07

<!--css : 样式表-->

<a href="http://www.baidu.com">百度</a>

<p id="link" style="color: blue;text-decoration: underline;cursor: pointer;">百度</p>
<script>
    document.getElementById("link").onclick=function () {
        window.location.href  = "http://www.baidu.com"
    }
</script>

用于文本格式化

：所以这些标签都不会自动换行

<b>加粗</b>
<i>斜体</i>
<sub>下标</sub>
<del>删除</del>
<sup>上标</sup>
<code>
    代码
</code>

<pre>
    public class User{


    }

</pre>

图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像</title>
</head>
<body>
<img width="200" src="../img/meinv.jpg" alt="图片未加载显示" title="悬停文字">
<img width="50%" src="../img/meinv.jpg" alt="">
</body>
</html>

表格

<body>
<!--
border：边框
cellspacing：边框的外边距
cellpadding：边框的内边距
-->
<table border="1" cellspacing="0" cellpadding="10">
    <!--表格的标题-->
    <caption>人物表</caption>
    <!--表格头部-->
    <thead>
    <!--行-->
    <tr>
        <!--加粗单元格-->
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <!--表格身体-->
    <tbody>
    <!--第一行-->
    <tr>
        <!--单元格-->
        <td>1</td>
        <td>张三</td>
        <td>20</td>
    </tr>
    <!--第二行-->
    <tr>
        <!--单元格-->
        <td>2</td>
        <td>李四</td>
        <td>20</td>
    </tr>
    </tbody>
    <!--表格脚部-->
    <tfoot>
    <tr>
        <th>总计</th>
        <!--colspan 合并单元格 合格的单元格数量，跨列-->
        <!--rowspan 跨行-->
        <th colspan="2" >2人</th>
    </tr>
    </tfoot>
</table>
</body>

列表

<body>
<!--
1. 无序列表  ul
2. 有序列表  ol
3. 自定义列表  dl dt(样式) dd(内容)

列表项： li
-->
<!--无序列表-->
<ul style="list-style-type: square">
    <li>java</li>
    <li>html</li>
    <li>oracle</li>
</ul>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>html</li>
    <li>oracle</li>
</ol>
<!--自定义列表-->
<dl>
    <dt>一</dt>
    <dd>java</dd>
    <dd>java</dd>
    <dd>java</dd>
    <dt>二</dt>
    <dd>html</dd>
    <dt>三</dt>
    <dd>oracle</dd>
</dl>
</body>

div盒子

<body>
    <!--
div 盒子  块级元素
span 盒子  内联元素

常见的块级元素： p ul ol li h1~h6 特性可以设定宽高，首尾自动换行
常见的行内元素： b i 特性不能设定宽高，不换行，margin仅左右有效，padding都有效
行内块级元素：img 不换行 可以设定宽高

我们经常希望将一组元素作为一个模板 这个时候我们会使用 div 作为他的盒子
一个段落中某部分内容需要有特殊的样式 使用span    $ 80.00
-->
<!--一张图片 保护图片的说明部分-->
<div class="cls-img">
    <img src="../img/001.jpg" alt="">
    <p>热巴现代版-<span class="text">南京分巴</span></p>
</div>
<div class="cls-img">
    <img src="../img/002.jpg" alt="">
    <p>热巴古装版-<span class="text">艾瑞分巴</span></p>
</div>
<!--行内块级-->
<img width="200" src="../img/002.jpg" alt="">
<img width="200" src="../img/002.jpg" alt="">
<img width="200" src="../img/002.jpg" alt="">
</body>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--注意需要name属性-->
<!--method 提交方式-->
<!--action:请求资源所在的路径,可以是网站，也可以是请求处理地址-->
<form method="get" action="https://www.baidu.com" id="info">
    <!--输入标签： 文字输入、日期输入、数字输入、单选框、复选框、下拉选择框-->
    <!--内容属性 value -->
    <!--?username=jack&password=123456&number=20&sex=man-->
    
    
    <!--required 非空判断-->
    <!--placeholder ： 提示-->
    <!--pattern 正则表达式判断-->
    <input type="text" value="" name="username" placeholder="请输入姓名" >
    <hr>
    <input type="password" name="password" required>
    <hr>

    <!--时间选择-->
    <input type="date" name="data">
    <input type="time" name="time">

    <input type="datetime-local" name="datetime">

    <hr>
    <!--单选框-->
    <!--这里 男性 是用户看到的-->
    <label for="man">男性</label>
    <!--程序读取的是 value 的值-->
    <input type="radio" id="man" name="sex" value="man" checked>
    <label for="lady">女性</label>
    <input type="radio" id="lady" name="sex" value="lady">
    <hr>

    <!--多选框-->
    <!--lan=java-->
    <!--&lan=java&lan=html&lan=oracle-->
    <!--lan=java,html,oracle-->
    <input type="checkbox" name="lan" id="java" value="java">
    <label for="java">Java语言基础</label>
    <input type="checkbox" name="lan" id="html" value="html">
    <label for="html">Html语言基础</label>
    <input type="checkbox" name="lan" id="oracle" value="oracle">
    <label for="oracle">Oracle基础</label>
    <hr>

    <!--按钮,普通按钮，图片按钮-->
    <input type="button" value="点击变长">
    <input type="image" src="../image/1.jpg">
    <hr>

    <!--文件域-->
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
    <hr>

    <!--下拉框-->
    <label for="sele">下拉选择</label>
    <select id="sele" name="sele">
        <option value="java">Java语言基础</option>
        <option value="html" selected>Html语言基础</option>
        <option value="oracle">Oracle基础</option>
    </select>
    <hr>

    <!--文本域-->
    <textarea name="textarea" cols="50" rows="10">50列10行</textarea>
    <hr>

    <!--邮箱简单验证-->
    邮箱：
    <input type="email" name="email" pattern="">
    <hr>

    <!--URL-->
    URL:
    <input type="url" name="url">
    <hr>

    <!--数字-->
    数字：
    <input type="number" name="number" max="100" min="10" step="10">
    <hr>

    <!--滑块
        input type="range"
    -->
    音量：
    <input type="range" name="voice" min="0" max="100" step="1">
    <hr>

    <!--搜索框-->
    搜索：
    <input type="search" name="search">
    <hr>
    
    <!--表单的应用
    readonly 只读
    hidden 隐藏
    disabled 禁用
    -->
    <input type="text" value="admin" name="username" readonly>
    <input type="text" value="admin" name="username" hidden>
    <input type="submit" value="提交" disabled>
    <hr>
    
    <!--隐藏域，对于用户是不可见的-->
    <input type="hidden" value="admin" name="password">

    <!--和表单默认是关联-->
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
<input type="submit" value="提交" form="info" for>

<p> &lt;p&gt;  ® </p>
</body>
</html>

音频/视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频</title>
</head>
<body>
<!--src:资源所在的路径-->
<!--controls:控制界面-->
<!--loop：循环播放-->
<!--autoplay:自动播放 规定自动播放 扰民-->
<audio src="../mp3/yangboy.mp3" controls loop autoplay></audio>
</body>
</html>
---------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频</title>
</head>
<body>
<!--src:资源所在的路径-->
<!--controls:控制界面-->
<!--loop：循环播放-->
<!--autoplay:自动播放 规定自动播放 扰民-->
<video src="../mp4/sb1.mp4" controls loop preload="auto" poster="../img/002.jpg"></video>

</body>
</html>

<body>
<!--<div id="header">-->
<!--    <h1>header</h1>-->
<!--</div>-->
<header>
    <h1>header</h1>
    <nav>
        <h2>导航</h2>
    </nav>
</header>
<!--<div id="content">-->
<div>
    <h1>content</h1>
    <section class="banner">
        <h2>banner</h2>
        <div class="banner-l">
            <h3>banner-l</h3>
        </div>
        <div class="banner-m">
            <h3>banner-m</h3>
        </div>
        <div class="banner-r">
            <h3>banner-r</h3>
        </div>
    </section>
    <section class="list">
        <h2>list</h2>
    </section>
</div>
<!--</div>-->
<div id="footer">
    <h1>footer</h1>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div id="header">-->
<!--    <h1>header</h1>-->
<!--</div>-->
<header>
    <h1>header</h1>
    <nav>
        <h2>导航</h2>
    </nav>
</header>
<!--<div id="content">-->
<div>
    <h1>content</h1>
    <section class="banner">
        <h2>banner</h2>
        <div class="banner-l">
            <h3>banner-l</h3>
        </div>
        <div class="banner-m">
            <h3>banner-m</h3>
        </div>
        <div class="banner-r">
            <h3>banner-r</h3>
        </div>
    </section>
    <section class="list">
        <h2>list</h2>
    </section>
</div>
<!--</div>-->
<div id="footer">
    <h1>footer</h1>
</div>
</body>
</html>

页面结构分析

元素名	描述
header	标题头部区域的内容(用于页面或页面中的一块区域)
footer	标记脚部区域的内容(用于整个页面或页面的一块区域)
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用(常用于侧边栏)
nav	导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>网页头部</header>

<section>网页主体</section>

<footer>网页脚部</footer>

</body>
</html>

iframe内联框架

<!--
在一个网页里面在嵌套一个网页
path= 引用地址，mainFrame= 框架标识名-->
<iframe src="path" name="mainFrame"> </iframe>

<iframe name="百度" src="https://www.baidu.com" frameborder="0" width="1000px" height="500px"></iframe>