HTML是使用标签来描述网页的一种语言,学习心得就是实践,而且兴趣很大,网页前端,自己用代码做网页这种感觉峥不错,爽。
HTML(Hypertext Markup Language,超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在CSS(Cascading Style Sheets,级联样式表单)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台。
文章目录
1.基本标签
❤创建第一个HTML标签
开始标签<>结束标签</>
h1表示HTML一个元素
<h1>这是我第一个标签<h1>
❤创建h2~h6标签
格式同h1,h1是一级标题,从h1到h6依次减小
❤创建P标签
p元素通常用来表示一个段落
<p>这是一个段落</p>
❤创建a标签
a标签通常用来定义一个链接
href属性的值就是链接的地址
点href后的网址会自动跳转这个网页
<a href="http://www.csdn.com">csdn</a>
❤创建img标签
img通常用来表示一个图片
src用来表示图片地址
alt用来表示图片未显示的内容
<img src="http://www.baidu.com/207791" alt="瞎写的地址"/>
❤创建div标签
div可以把文档分为独立的,不同的部分
<div>创建div标签</div>
❤添加注释
<!--要注释的内容-->
<!--<p>要注释的段落</p>-->
❤总体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h3>这是h3标题</h3>
<p>这是一个段落</p>
<!--注意:-->
<a href="www.csdn.cn">csdn链接</a>
<img src="www.tupian.cn/1279" alt="瞎编的"/>
<div>创建了一个div标签</div>
</body>
</html>
2.基础
❤hello world
1.<html>...</html>就是一个最大的HTML元素
2.bgcolor="yellow"、align="center"都是HTML元素的属性
3.align属性值| 含义
center| 居中对齐
right| 右对齐
left| 左对齐
4.| 属性 | 值 | 含义
| ———— | ———–
| class | 自定义的元素类名 | 元素的类名
| id | 自定义的元素id名 | 元素的唯一的id
| style | 元素内联样式 | 元素的样式
| title | 额外信息内容 | 元素的额外信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body bgcolor="F6F3D6">
<!--用HTML语言向世界打声招呼吧!-->
<h1 align="center">Hello World</h1>
<p align="center">动手改变世界</p>
</body>
</html>
❤自我简介
1.<!DOCTYPE HTML>声明文档格式
2.根元素:HTML 元素,头元素:head 元素,
网页标题元素:title,元信息元素:meta
3.编码格式:charset,描述:description,
关键词:keywords,主体元素:body 元素
4.
<!DOCTYPE html>
<html>
<head>
<title>自我简介</title>
<meta charset="utf-8">
<meta name="description" content="xxxx的x自我简介网站">
<meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">
</head>
<body>
<h2>简介</h2>
<p>在这里简单的描述一下你自己吧。</p>
<h2>三个与你最有关的词</h2>
<p>这三个词可以是一种形容,也可以是一种运动或者是一种独特的爱好,等等。</p>
<ul>
<li>第一个词</li>
<p>选择第一个词的原因</p>
<li>第二个词</li>
<p>选择第二个词的原因</p>
<li>第三个词</li>
<p>选择第三个词的原因</p>
</ul>
</body>
</html>
3.文本
❤带超链接的网页
1.href 属性是超链接最重要的属性,
它用于指定超链接目标的 URL。
2.目标URL有三种类型:
锚 URL (anchor URL):指向同一页面内某一位置;
相对 URL (relative URL):指向同一网站的不同文件;
绝对 URL (absolute URL):指向另一个网站。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML链接</title>
<meta name="description" content="HTML链接知识讲解">
<meta name="keywords" content="HTML, Link">
</head>
<body>
<h1>HTML 入门</h1>
<h2>本页目录</h2>
<ul>
<li><a href="#toc1">简介</a></li>
<li><a href="#toc2">第1关</a></li>
<li><a href="#toc3">第2关</a></li>
</ul>
<h2 id="toc1">简介</h2>
<p>
<a href="https://en.wikipedia.org/wiki/HTML"target="_blank">HTML</a>(Hypertext Markup Language,超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
<a href="https://en.wikipedia.org/wiki/CSS"target="_blank">CSS</a>(Cascading Style Sheets,级联样式表单)和
<a href="https://en.wikipedia.org/wiki/JavaScript"target="_blank">JavaScript</a>的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
<p>自1995年HTML2.0面世,HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准,2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升,使HTML迎来了新的爆发式发展。</p>
<h2 id="toc2">第1关</h2>
<p>初识HTML:简单的Hello World网页</p>
<h2 id="toc3">第2关</h2>
<p>HTML链接:带超链接的网页</p>
<hr>
<p>若需帮助,请发送问题到<a href="mailto:someone@email.com">someone>E-Mail</a>。</p>
<p><a href="#">回到顶部</a></p>
</body>
</html>
❤网络文章网页
1.一个段落中换行,<br>标签
2.三种列表类型组成元素如下:
| 类型 | 父元素 | 子元素|
| ———— | ———— |
| 有序列表 | ol | li|
| 无序列表 | ul | li|
| 描述列表 | dl| dt, dd|
3.strong 表示内容的重要性
em 表示内容的着重点
mark,表示内容高亮显示
,对搜索结果页面或文章中的搜索词进行突出显示
small 表示细则一类的旁注,
通常包括免责声明、 注意事项、法律限制、版权信息等
b 希望读者注意的文字,
如文档摘要里的关键词、评论中的产品名、文章导语等
i 表示不同于其他文字的文字,
具有不同的语态或语气 如分类名称、技术术语、翻译的散文等
sub 定义下标 常见的下标包括化学符号等
sup 定义上标 常见的上标包括商标符号、指数和脚注编号等
4.q 元素用于短的引用,如句子里面的引用;
blockquote 元素表示单独存在的引用,它默认显示在新的一行。
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>HTML – 维基百科</title>
</head>
<body>
<h1>HTML</h1>
<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
<a href="https://en.wikipedia.org/wiki/Markup_language" title="Markup language" target="_blank">标记语言</a>。 在级联样式表单(CSS)和JavaScript的帮助下,HTML已经成功构建了一整套面向Web的开发与应用平台<sup><a href="#ref1">[1]</a></sup>。
</p>
<h2>历史</h2>
<h3>开发过程</h3>
<p>1980年,物理学家<a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee" target="_blank">Tim Berners-Lee</a>,
<a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人,提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年, Berners-Lee写了一个备忘录,提出了基于Internet-based
<strong>超文本系统</strong><sup><a href="#ref2">[2]</a></sup>。
</p>
<h3>HTML里程碑</h3>
<dl>
<dt>1995年11月24日</dt>
<dd>HTML2.0发布,对应的IETF文档为<a class="external mw-magiclink-rfc" rel="nofollow" href="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866</a>。</dd>
<dt>1997年1月14日</dt>
<dd>HTML 3.2以
<a href="https://en.wikipedia.org/wiki/W3C_Recommendation" class="mw-redirect" title="W3C Recommendation" target="_blank">
<abbr title="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。 随后的HTML标准都由W3C组织发布。</dd>
<dt>1997年12月18日</dt>
<dd>HTML 4.0发布<sup><a href="#ref3">[3]</a></sup>。</dd>
<dt>2014年10月28日</dt>
<dd>HTML5 发布。</dd>
<dt>2016年11月1日</dt>
<dd>HTML 5.1发布。</dd>
</dl>
<h2>参考文献</h2>
<ol>
<small>
<li id='ref1'>Flanagan, David. <i>JavaScript - The definitive guide</i> (6 ed.). p. 1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."</li>
<li id="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li>
<li id="ref3">"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.</li>
</small>
</ol>
</body>
</html>
❤日常消费账单表格网页
1.在HTML表中,一个表格(table)由行(tr)组成,
每一行由单元格组成,
单元格有标题单元格(th)和数据单元格(td)。
2.设置带边框的表格:指定<table>元素的border属性值。
3.值 |含义
col |单元格是列的表头
row |规定单元格是行的表头
colgroup |单元格是列组的表头
rowgroup |单元格是行组的表头
4.<thead>元素标记表格第6行到第10行为头部;
<tbody> 元素包围了第15行到第32行的所有数据行;
最后,<tfoot>元素标记表格的尾部。
5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格</title>
<meta name="description" content="HTML表格知识讲解">
<meta name="keywords" content="HTML,表格, Table">
<style type="text/css">
table {
border-collapse: collapse;
}
caption {
font-weight: bold;
margin-bottom: .5em;
}
th,
td {
padding: .5em .75em;
border: 1px solid #000;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<table border="1" style="margin:auto" width="400">
<caption>日常消费账单</caption>
<thead>
<!-- 表格头部 -->
<tr>
<th align="left" scope="col">消费项目</th>
<th align="right" scope="col">一月</th>
<th align="right" scope="col">二月</th>
</tr>
</thead>
<tbody>
<!-- 表格主体 -->
<tr>
<th align="left" scope="row">食品烟酒</th>
<td align="right">¥1241.00</td>
<td align="right">¥1250.00</td>
</tr>
<tr>
<th align="left" scope="row">衣物</th>
<td align="right">¥330.00</td>
<td align="right">¥594.00</td>
</tr>
<tr>
<th align="left" scope="row">居住</th>
<td align="right">¥2100</td>
<td align="right">¥2100</td>
</tr>
<tr>
<th align="left" scope="row">生活用品及服务</th>
<td align="right">¥700.00</td>
<td align="right">¥650.00</td>
</tr>
<tr>
<th align="left" scope="row">医疗保健</th>
<td align="right">¥150.00</td>
<td align="right">¥50.00</td>
</tr>
<tr>
<th align="left" scope="row">教育、文化和娱乐</th>
<td align="right">¥1030.00</td>
<td align="right">¥1250.00</td>
</tr>
<tr>
<th align="left" scope="row">交通和通信</th>
<td align="right">¥230.00</td>
<td align="right">¥650.00</td>
</tr>
<tr>
<th align="left" scope="row">其他用品和服务</th>
<td align="right">¥130.40</td>
<td align="right">¥150.00</td>
</tr>
</tbody>
<tfoot>
<!-- 表格尾部 -->
<tr>
<th align="left" scope="row">总计</th>
<th align="right">¥5911</th>
<th align="right">¥6694</th>
</tr>
</tfoot>
</table>
</body>
</html>