初识html（1）

最新推荐文章于 2019-05-13 17:08:09 发布

zenkle

最新推荐文章于 2019-05-13 17:08:09 发布

阅读量133

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_35142645/article/details/82630931

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1⃣️、 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

2⃣️、

<html></html>:html文档的开头和结束

<body></body>:作为内容展示给读者看到内容全部包含在里面

<head></head>：文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。比如：

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

<title></title>:网页标题，是整个网页的名字，即在浏览器顶部的tab栏里显示的。搜索引擎通过它来搜索网页。

<h1></h1>:一级标题 <h6></h6>:六级标题 <……><……>：……级标题（共有1-6级标题）

<strong></strong>:字体加粗

<em></em>：斜体

<q></q>:双引号,对文本的引用

<blockquote></blockquote>:对长文本的引用,并缩进

<br/>:回车

<&nbsp>:空格

<hr/>:添加水平横线

<address></address>:地址信息。字体显示为斜体；包含内容另起一行独立显示

<code></code>:一行代码，另起一行显示

<pre></pre>:代码段

<ul></ul>:添加无序列表

<ol></ol>:添加有序信息列表

<div></div>:为网页划分独立的版块

<div id=" "></div>:为每个版块命名

<a href=" 超链接网址 " title=“ 鼠标滑过链接文字时会显示这个属性的文本内容”>点击它就能超链接的文字</a>：

网页中“点击它就能超链接的文字”这几个字就做成了超链接且只能在当前浏览器窗口浏览，这几个字显示为蓝色（被点击之后这几个就变成紫色）

title属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

<a href="超链接地址" target="_blank"></a>:在新的浏览器窗口打开网址

3⃣️、表格


  <tbody>
<table summary="摘要">//摘要中的内容不会显示出来
<caption>统计表</caption>//表格名称
    <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
<tr>
    <td>三班</td>
    <td>32</td>
    <td>80<td>
</tr>
  </tbody>

打印结果：
     统计表 
班级	学生数 平均成绩
一班	30	  89
二班	35	  85
三班	32	  80	

创建表格的四个元素：

table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

4⃣️、

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

//http类型:这个网页是表现内容用的
//content(内容类型):这个网页的格式是文本的
//charset(编码):这个网页的编码是UTF-8,需要注意的是这个是网页内容的编码,而不是文件本身的.
编码不用说,content常见的还有xml等类型.meta,网页html语言里head区重要标签之一.
//http-equiv类似于http的头部协议,他回应浏览器一些有用的信息,以帮助正确和精确地显示网页内容.常用的http-equiv类型有:
//Content-Type和Content-Lanauage(显示字符集的设定)
说明:设定页面使用的字符集,用以说明主页制作所使用的语言和文字,浏览器会根据此来调用相应的字符集显示网页内容.

?图片理解

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>认识html标签</title>
</head>

 <body>                           /在网页上要展示出来的页面内容一定要放在body标签中
<h1>勇气</h1>                     /标题符号/
 <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>      //段落符号//
 <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
<img src="http://img.mukewang.com/52b4113500018cf1020002''>             //插入图片//

</body>
</html>

?使用<hx>标签来制作文章的标题。标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法：

?<span></span>:没有语义，为了设置单独的样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
 color:blue;   
}
</style>
</head>
<body>
    <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>

?<ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul>

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>

zenkle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识html（1）

1⃣️、 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新...
复制链接

扫一扫

专栏目录