Html的学习
-------关于我为啥要学html:
web方面很多东西都和html有一定的关系,在杂七杂八看了一堆东西之后,觉得还是要去打好基础,所以就决定去学习html,为以后的各种骚操作打基础
html代码检查网站https://validator.w3.org
在线学习网站http://www.w3school.com.cn
网页模板:
每个网页都包括html,head , title, meta和body元素
<!DOCTYPE html>
<html lang=”en”> lang用于指定文档书面语言的属性
<head> 页头
<title>文件的标题</title>
<meta charset=”utf-8”> meta显示网站特征,比如字符编码等
</head>
<body> 主体部分
文件的主体
</body>
</html>
2.1标题元素:
标题分为h1到h6六级,<h1>最大,<h6>最小。这个标题是放在body内的,用于所写文章的标题。
2.2段落:
<p>和</p>之间的文本形成段落
<br>表示换行(丢在哪都可以)例:<p>这个:<br>是实验</p>
<hr>表示水平标尺(其实就是画一条长直线,一般不用)例:<p></p><hr>
<blockquote>表示块引用元素(其实就是对文本进行缩进)例:<p>你好:</p><blockquote>我是<blockquote>
短语元素指定容器标记之间的文本的上下文与含义(类似于word的加粗,加下划线等功能)详细操作可以百度
有序列表和无序列表和描述列表:
- 有序列表(可以对列表的东西进行排序,但是必须用<ol>,否则就不行)
<ol>
<li>BLUE</li>
<li>red</li>
<li>WHITE</li>
</ol>
- 无序列表(不对列表的元素进行排序,但是前面可以有个小圆点)
用法和有序列表相同,但是无序列表的开头是<ul>
- 描述列表
描述列表以<dl>标记开始,以</dl>结束;每个要描述的语句以<dt>开始
以</dt>结束;每项描述的内容以<dd>标记开始,</dd>结束
例子:
<body>
<h1>Heading level 1</h1>
<dl>
<dt>TCP</dt>
<dd>TCP的内容</dd>
<dt>IP</dt>
<dd>IP的内容</dd>
</dl>
</body>
关于特殊字符
可以参考这个网站http://www.w3school.com.cn/html/html_entities.asp
2.11结构元素:
除了常规性的div元素,html5还引入了许多语义上的结构元素来配置网页区域.
分为
- Div元素
Div元素在网页中创建一个常规结构区域,块元素以<div>开始,以</div>结束
- Header元素
Header元素的作用是包含网页文档或文档区域的标题,以<header>开始,以</header>结束.header通常包含一个或多个标题元素(<h1>到<h6>)
- Nav元素
作用是建立一个导航链接区域。块显示元素,以<nav>开始,以</nav>结束
- Main元素
作用是包含网页文档的主要内容。每个网页只因有一个main,以<main>开始,以</main>结束
- Footer元素
作用是为网页或网页区域创建页脚,以<footer>开始,以</footer>结束
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Heading level 1</h1>
</header>
<nav> 编码nav元素来包含主导航区域的文本
<b>Home Services Contact</b> b表示加粗
</nav>
<main>
<h2>New Media and Web Design</h2>
<p>Trillium Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services.</p>
<h2>Meeting Your Business Needs</h2>
<p>123456789</p>
<div>
<strong>Casita Sedona Bed & Breakfast</strong><br>
612 Tortuga Lane<br>
Sedona, AZ 86336<br>
</div>
</main>
<footer>
<small><i>456789</i></small> i表示斜体
</footer>
</body>
</html>
2.13锚元素:
锚元素的作用是定义超链接,它指向你想显示的一个网页或者文件。锚元素以<a>标记开始,以</a>j结束。两个标记之间是可以点击的链接文本或者图片。用href属性配置链接应用,即要访问(链接到)的文件的名称和位置。
例子:<a href=” https://www.baidu.com/”>baidu</a>(然而用www.baidu.com就不行)
Href=”绝对链接”(绝对链接:协议名称http://和域名)
但是如果要链接到自己网站内部的网页时,可以使用相对链接(这种链接的href值不以http://开头,也不含域名,只需要包含想要显示的网页文件名(或者文件夹和文件名的组合))
例如:为了从主页index.html链接到同一文件夹下的contact.html,就可以直接<a href=”contact.html”>Contact</a>
新建文件夹保存多个网页
访问的方法
<nav>
<b>
<a href="index.html">Home</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
</b>
</nav>
电子·邮件链接:
锚标记也可以用于创建电子邮件链接,和外部链接相似但是有两点不同:
- 它使用mailto:,而不是http://
- 它打开浏览器配置的默认邮件程序,将E-mail地址作为收件人
例如,要创建指向help@webdevbasics.net的电子邮件链接,要按如下方法
<a href=”mailto:help@webdevbasics.net”>help@webdevbasics.net</a>
<li>E-mail:
<a href="mailto:contact@trilliummediadesign.com">contact@trilliummediadesign.com</a>
</li>
HTML 参考手册- (HTML5 标准)
关于标签列表
1.按字母顺序排序 https://www.runoob.com/tags/html-reference.html
2.按功能顺序排序https://www.runoob.com/tags/ref-byfunc.html
HTML的基础学习到此结束