day01前端基础html

作者: AidenWang292 | 来源:发表于2018-03-30 19:28 被阅读28次

浏览器内核：渲染引擎和js引擎

image.png
web结构构成

image.png
选择题

67V8VXXF}N`S_E})9}XL4$6.png
sublime编辑器常用快捷键
4)YVZ84LA$DAH1F6BP0)0ZT.png

`sublime快捷键扩展`

html：中文翻译为：超文本标签语言
常用字符集编码方式

ww.png
html5基本写法

<!DOCTYPE type>
<html lang="en">//声明文档类型
  <head>
      <meta charset="UTF-8">//生命字符集编码方式
      <title>html</title>
</head>
<body>
<h1>我是h1</h1>//字越来越小
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h5>
<h6>我是h1</h7>
<p>我是段落标签</p>
我是换行标签<br>我被换行了
<hr/>我是水平线
</body>
</html>

div和span：div独自占用一行，没有语义

 <span></span>我们是span我们在一行，不过`<br/>`可以将我们分开
<span></span><! -- <br/> --><span></span>

使用sublime创建html:html:xs/html:xt/!+table键
-文本格式化标签:推荐使用前边

    <!-- 粗体标签-->
    <strong></strong><b></b>
    <!-- 斜体标签 -->
    <em></em><i></i>
    <!-- 删除线标签 -->
    <del></del><s></s>
    <!-- 下划线标签-->
    <ins></ins><u></u>

strong和em都有强调语气，del有删除语义，ins插入文本下划线

img标签属性

<img src="exapmle.jpg" width="100" height="100" alt="我是无图显示文本" title="我是鼠标悬停显示文字" border="我是边框宽度">

src标签属性

<a href="http://www.baidu.com/example.html/example.jpg/#/空" alt="鼠标停留提示文本" target="描述跳往页面打开方式`_self和_blank`">我是链接名称</a>

默认为self方式，无法返回，_blank为跳往指定链接，保留原页面，新开一个网页，新开网页也就是指定链接

锚点
- 创l建1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
</head>
<body>
    <!-- <a href="2.html" target="self">aaaaaa</a> -->
    <!-- 利用锚点去第二段 -->
    <a href="#maodian2">我要去第二段通过锚点</a>
    <!-- 利用锚点去2.html最后一段 -->
    <br/><a href="2.html#maodian3">我要去2.html最后一段</a>
    <p id="maodian1">我是第一段</p>
    <p id="maodian2">我是第二段</p>
</body>
</html>

创l建2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2</title>
</head>
<body>
<p id="maodian3">我是2.html最后一段</p>
</body>
</html>

base标签可以在<head><head>中设置所有链接打开方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 统一设置所有链接跳转方式为_blank -->
    <base target="_blank">
</head>
<body>
 <a href="1.html">111</a>
 <a href="2.html">222</a>
</html>

注释语句：

image.png
空格： 
上标：4²下标：H₂O`
常见特殊字符

1.png
绝对路径和相对路径

绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的“D:\web\img\logo.gif”，或完整的网络地址，例如“[http://www.itcast.cn/images/logo.gif](http://www.itcast.cn/images/logo.gif)”。

相对路径
以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。

图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。

图像文件位于HTML文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

无序列表/有序列表/自定义列表

<!-- 无序列表 -->
    <ul>
        <li></li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li></li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
            <dt></dt>
            <dd></dd>

    </dl>

思维导图

HTML第一天.jpg

-练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<!-- 第一题 -->
    <p >大家好一起来学习html标记语言</p>
    <!-- 第二题 -->
    <h4n>&bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《早发白帝城》</h4>
    <div>朝辞白帝彩云间，千里江陵一日还。</div>
    <div>两岸猿声啼不住，轻舟已过万重山</div>
    <!-- 第三题 -->
    <div><h1>敕勒歌</h1></div>
    <div><h3>朝代：南北朝</h3></div>
    <div><h3>作者：佚名</h3></div>
    <div>&nbsp;&nbsp;&nbsp;&nbsp;敕勒川，</div>
    <div>&nbsp;&nbsp;&nbsp;&nbsp;阴山下。</div>
    <div>&nbsp;&nbsp;&nbsp;&nbsp;天似苍穹，</div>
    <pre>
    笼盖四野。
    天苍苍，
    野茫茫。
    风吹草底现牛羊。</pre>
    <!-- 第四题 -->
    <p align="center">关于我们&nbsp;| &nbsp;招聘信息&nbsp;| &nbsp; 联系我们&nbsp;| &nbsp;意见反馈</p>
    <hr/>
    <p align="center">Copyright&copy;2016imooc.com All Rights Reserved</p>
    <!-- 第五题 -->

    公式：X<sup>2</sup>+X=0 &nbsp;&nbsp;X<sub>1</sub>=0&nbsp;；&nbsp;X<sub>2</sub>=-1

<!-- 第六题 -->

<ul>
<li>朝辞白帝彩云间</li>
<li>千里江陵一日还</li>
<li>两岸猿声啼不住</li>
<li>轻舟已过万重山</li>

</ul>
<ul type="square">
<li>朝辞白帝彩云间</li>
<li>千里江陵一日还</li>
<li>两岸猿声啼不住</li>
<li>轻舟已过万重山</li>

</ul>
<!-- 第七题 -->
<ol type="1">
<li>朝辞白帝彩云间</li>
<li>千里江陵一日还</li>
<li>两岸猿声啼不住</li>
<li>轻舟已过万重山</li>

</ol>
<ol type="i">
<li>朝辞白帝彩云间</li>
<li>千里江陵一日还</li>
<li>两岸猿声啼不住</li>
<li>轻舟已过万重山</li>

</ol>
<!-- 第8题 -->
一幅图像：<img src="images/t2.jpg" alt="" width="30%">
一幅动画图像：<img src="images/t1.gif" alt="" width="50px" height="50px" title="雪图" >
<!-- 第九题 -->
<br><p id="d"><a href="#d">这里是顶部</a>
    <p><a href="#a">水果</a></p>
    <p><a href="#b">蔬菜</a></p>
    <p><a href="#c">运动</a></p>
<p id="a">水果</p>
<ul>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
    <li>香蕉</li>
</ul>
<a href="#d">返回顶部</a>
<p id="b">蔬菜</p>
<ul>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
    <li>萝卜</li>
</ul>
<a href="#d"></a>

<p id ="c">运动</p>
<ul>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    <li>篮球</li>
    
</ul>
<!-- 第十题 -->
    <h1>Things I've Learned</h1>
<p>Internet Basic</p>
<ol>
    
    <li>HTTP Requests</li>
    <li>IP Address</li>
    <li><ins>Servers</ins></li>
</ol>
<p>HTML</p>
<ul>
<li>Stands for <em><ins><strong>HYPER Text Markup langue</strong></ins></em></li>
<li>Lots of tags
<ul>

<li>Boilerplate
<ol type="1">
    <li>Doctype</li>
    <li>Html</li>
    <li>Head</li>
    <li>Body
        <ol type="1">
            <li>Title</li>
            <li>meta</li>
            <li>base</li>
            <li><del>delete me</del></li>
        </ol>

    </li>
</ol>

</li>
<li>Headings</li>
<li>paragraph</li>
<li>em</li>
    <li><strong>strong</strong></li>
</ul>

</li>



</ul>


</body>
</html>

单选练习

单选题共10题满分：100分
1、对HTML中标签分类描述正确的是?(10分)
A、按照显示方式分为单标签和双标签 B、按照写法分为单标签和双标签C、单标签中可以继续包含其他标签 D、页面中只有双标签
2、<h1></h1>标签描述正确的是?(10分)
A、设置网页标题 B、设置网页段落
C、文字小于<h6></h6>中的文字 D、标题标签中数字越大，文字越大
3、什么是单标签?(10分)
A、页面中只有一个标签 B、单标签指的是没有开始标签
C、单标签指的是没有结束标签 D、没有开始标签和结束标签
4、target属性什么作用?(10分)
A、在图片标签中设置图片路径 B、在超链接中设置页面跳转方式
C、在超链接中设置鼠标悬停时的文字提示 D、在图片标签中设置页面跳转方式
5、对title标签描述正确的是?(10分)
A、title标签可以放到任何位置 B、title标签属于单标签
C、title标签要放到head标签中 D、title标签用来显示网页主体内容信息的
6、在HTML中设置网页标题的是哪个标签?(10分)
A、title B、body C、head D、link
7、文字斜体显示是哪个标签?(10分)
A、i标签或者strong标签 B、S标签或者em标签
C、em标签或者b标签 D、em标签或者i标签
8、web标准由哪些组成?(10分)
A、结构,样式,行为 B、结构,样式 C、样式,行为 D、结构,行为
9、文字加粗显示是哪个标签?(10分)
A、em B、ins C、strong D、u
10、对HTML描述正确的是?(10分)
A、HTML指的是超文本标记语言 B、HTML是用来设置网页样式的
C、Help txt markup Language 是HTML的单词缩写
D、HTML是用来设置网页特效的

网友评论

我爱编程

本文标题：day01前端基础html

本文链接：https://www.haomeiwen.com/subject/ldxmcftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

day01前端基础html

`sublime快捷键扩展`

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程