html笔记(一篇足矣+10分钟入门)

HTML  :hyper text markup language(超文本标记语言)
HTML5 :提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性和规则的建立提供了许多新的网页功能,如使用网页实现动态渲染图形、图表、图像和动画,以及不需要安装任何插件直接网页播放视频等。
W3C
   world wide web consortium(万维网联盟)
   成立于1994年,web技术领域最权威和具影响力的国际中立性技术标准机构
   http://www.w3.org/
   http://www.chinaw3c.org/
W3C标准包括
   结构化标准语言(html、xml)
   表现标准语言(css)
   行为标准(dom、ECMAScript)
html基本机构
   <body>、</body>等成对的标签,分别叫开放标签,和闭合标签
   单独呈现的标签(空元素),如<hr/>;意为用/来关闭空元素

1.网页基本信息

DOCTYPE声明
<title>标签
<meta>标签
<!--DOCTYPE:告诉浏览器,我们要使用什么规范-->
<!DOCTYPE html>
<html>
<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签,他用来描述我们网站的一些信息-->
    <!--meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="java">
    <meta name="description" content="学习java">
    <!--title网页标题-->
    <title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
hello
</body>
</html>

03.网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
<!--段落标签-->
<p>鹅鹅鹅,</p>
<p>曲项向天歌。</p>
<p>白毛浮绿水,</p>
<p>红掌拨清波。</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
鹅鹅鹅,<br/>
曲项向天歌。<br/>
白毛浮绿水,<br/>
红掌拨清波。<br/>

<h1>字体样式标签</h1>
<!--粗体,斜体-->
粗体:<strong>i love you</strong>
斜体:<em>i love you</em>

<br/>
<!--特殊符号-->
空    格:
空&nbsp; &nbsp; &nbsp; &nbsp; 格
<br/>
&gt;
&lt;
&copy;版权所有
<!--
特殊符合记性方式
&   ;
-->
</body>
</html>

04.图像标签 常见的图像格式


jpg
gif
png
bmp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
img 学习
src:图片地址(必填)
  相对地址(推荐使用)
  绝地地址

../   上一级目录

alt:图片名字(必填)
-->
<img src="../resource/img/5efaffbac96db.jpg" alt="图片" title="悬停文字" width="300" height="300">
<a href="链接标签.html#down">跳转</a>
</body>
</html>

04.块元素和行内元素

  • 块元素      无论内容多少,该元素独占一行(p、h1-h6、…)
  • 行内元素  内容撑开宽度,左右都是行内元素的可以排在一行 (a strong em …)

05.列表标签  无序    有序列表   定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--
有序列表
应用范围:试卷,问答。。。
-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>C</li>
    <li>C++</li>
</ol>
<!--
无序列表
应用范围:导航,侧边栏。。。
-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>C</li>
    <li>C++</li>
</ul>
<!--
自定义列表
dl:标签
dt:列表名称
dd:列表内容

应用范围:公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>C</dd>
    <dd>C++</dd>

    <dt>位置</dt>
    <dd>西安</dd>
    <dd>重庆</dd>
</dl>
</body>
</html>

06.表格标签

为什么使用表格 简单通用 结构稳定
基本结构 单元格 行 列 跨行 跨列

<!--
表格
行 tr
列 td
-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <!--rowspan跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

07.媒体元素  视频元素

<!--
音频和视频
src  资源路径
controls  控制条
autoplay  自动播放
-->
<video src="../resource/video/1.mp4" controls autoplay></video>
<audio src="../resource/audio/1.mp3" controls autoplay></audio>

08.排版标签

b和strong 文字以粗体显示

i和em 文字以斜体显示

s和del 文字以加删除线显示

u和ins 文字以加下划线显示

09.链接

<a href="http://www.qq.com" target="_blank">腾讯</a>

内部链接
网站内部之间的相互链接,直接链接内部页面名称即可。

例如<a href="index.html">首页</a>

10.字符代码

11.表单

input 控件
<input type="属性值" value="hello">
input 输入的意思   < input />标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性
 

12. input type新增属性值:

 week                                    <input  type="week"                       周

猜你喜欢

转载自blog.csdn.net/weixin_53185230/article/details/127531249