关于HTML的初识

part1. HTML初识

---学习平台：https://www.imooc.com/learn/9

一、内容：

1、HTML的具体释义

外文：HyperText Markup Language，即超文本标记语言；“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

类型：标记语言

阅读方式:网页浏览器

中文缩写:超文本标记语言

结构：“头”head--网页的信息，“主体”body--网页的具体内容。

HTML：网页内容的载体；区别于：css:网页的样式，外衣；javascript:网页的特效。

2、html的标签: 标签用箭头< 和 >连接，分为开始标签<>和结束标签</>，标签之间是标签的内容，标签可以互相嵌套。

（1）标签的语义化：使得标签出现的更加合理！

1）根标签：

<html>...</html>称为根标签，所有的网页标签都在它里面。

html文件的固定结构，如下：

<html>
    <head>...</head>
    <body>...</body>
</html>

2）段落标签--p标签：paragraphd，文章的段落--><p>...</p>
3）标题标签--h标签：h1--h6, 其中，h1至h6表现为逐级递减，字号越来越小
eg.<body>
       <h1>一级标题</h1>

       <h2>二级标题</h2>

       <h3>三级标题</h3>

       <h4>四级标题</h4>

       <h5>五级标题</h5>

       <h6>六级标题</h6>

   </body>
4）强调语气的标签
strong标签：<strong>..字体加粗..</strong> ；
em标签<em>..字体倾斜..</em>
5)没有语义的标签--span标签：<span>...</span>，为设置单独的样式时使用，例如把某句话变一个颜色
6)引用标签:出现双引号

短文本引用-->  q标签：<q>...</q>，语义--引用别人的话

长文本引用-->   blockquote标签：<blockquote>...</blockquote>

7）空标签：指没有html内容的标签(点击tab键添加符号之间的空格)

br标签：break a line, <br />（br与/之间有个空格，版本首选）或<br>,表示一个简单的换行符，拆行
hr标签：horizontal rule,<hr />（hr与/之间有个空格，版本首选）或<hr>,表示添加一个水平分割线/水平横线
img标签：image,<img src="图片地址" alt="图片下载失败时的替换文字" title="提示文本"/>

8）&nbsp标签：为网页中添加一些空格
9）adress标签：网页的地址信息，默认样式为斜体，<address>...</address>
10)代码标签：
code标签：
为网页加入一行代码，<code>代码语言</code>
pre标签：
为网页中加入一段代码段，<pre>代码段</pre>
11）信息列表标签：
ul-li标签，没有信息先后顺序的列表，默认每项ul前会自带一个圆点，
语法：
<ul>
   <li>..信息..</li>
   <li>..信息..</li>
   <li>..信息..<li>
</ul>
ol-li标签，具有先后顺序的列表，默认每项ul前会自带序号，从1开始，
语法：<ol>

   <li>..信息..</li>
   <li>..信息..</li>
   <li>..信息..<li>
</ol>
12）div标签：在排版中，为网页划分独立的逻辑板块，相对于一个容器
<div>...</div>

div的命名：可以给div标签加id属性，语法：<div id="版块名称">...</div>，版块名称用英文
13）table标签：未添加css时默认显示没有表格线
<table>...</table>
<tbody>...</tbody>：用于对表格分段
<tr>...</tr>：表格的一行
<td>...</td>：表格的单元格，表格中有几对就决定了有几列
<th>...</th>：表格头部的一个单元格，表格表头，默认为粗体并居中显示
语法：
<table>
   <tbody>
      <tr>
          <th>...</th>
      </tr>
      <tr>
          <td>...</td>
      </tr>
   </tbody>
</table>

i.给表格加表格线（css样式）：
<head>
 <style type="text/css">
table tr td,th{border:1px solid:#000;}
 </style>
</head>
ii.给表格加摘要：<table sunmmary="...">...</table>，和标题:<table>..<caption>标题内容</caption>..</table>
14）<a>标签：实现超链接，点击跳转到另外一个页面
语法：
<a href="目标网址" title="显示鼠标滑过时的文本" target="_blank" >
链接显示的文本
</a>

target:表示在新建的浏览器窗口中打开链接
mailto:可以在网页中链接电子邮件地址，邮件主题：subject，邮件内容：body，cc=指抄送地址，bcc=指密件抄送地址，多个参数时开头用？连接，中间用&连接，

eg.<a href="mailto:yy@limoc.com?cc=@xioamingmoc.com&bc=@liumoc.com&subject="主题"&body="邮件内容">发送</a>



（3）注释：<!--注释文字-->  快捷方式：ctl（command） + /

2.想法：

对于HTML的初认知，始于语言学习的第一步“Hello World”，偶然在搜索HTML的编辑器时，看到利用TXT文档创建一个HTML的“小文件”，可以用浏览器打开，哈哈，感觉像是发现了新大陆。或许在大二或者什么时候在公开课几节HTML课程中学习中有关于它的讲解，不过落了很久的知识已经生锈了：) 现在发现还有很多。。。

posted @ 2020-04-10 17:15 Gonnago 阅读(99) 评论(0) 收藏举报

刷新页面返回顶部

Rusilmli

关于HTML的初识

公告