首页 > 其他分享> > First Day | Web前端 | 实训笔记~

First Day | Web前端 | 实训笔记~

2021-06-01 20:59:27 作者：互联网

注释

解释说明代码，隐藏代码

注释不能嵌套

语法实现：

常用标签：

1、<p>段落</p>

2、<a>链接</a>

①href：创建指向另一个文档的链接

<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

②name：创建文档内的书签

<a name="tips">基本的注意事项 - 有用的提示</a>

3、<image>图片</image>

<img src=file:///D:\Source\素材\1.jpg><br>

4、<em>斜体</em>

……

块级元素

1.总是从新的一行开始

2.高度、宽度都是可控的

3.宽度没有设置时，默认为100%

4.块级元素中可以包含块级元素和行内元素

<h1>一级标题</h1>
 <p>段落</p>
<ul>无序列表</ul>

行内元素

也称为“内联函数”

1.和其他元素都在一行

2.高度、宽度以及内边距都是不可控的

3.宽高就是内容的高度，不可以改变

4.行内元素只能是行内元素，不能包含块级元素

<a>链接</a>
<br>  换行
<b>加粗</b>

实体

实体名称：“&”＋字母

实体编号：“&#”＋数字

<!--小于号“<”的实体名称是“&lt;”，实体编号是“&#60;”-->
<p>&lt;</p>
<p>&#60;</p>

<!--版权“©”的实体名称是“&copy”，实体编号是“&#169;”-->
<p>&copy;</p>
<p>&#169;</p>

输出：

列表

1.无序列表：使用粗圆点，始于 <ul>…</ul>标签，每个列表项始于 <li>…</li>

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

输出：

咖啡
茶
牛奶

2.有序列表：使用数字，始于 <ol>…</ol>标签，每个列表项始于 <li>…</li> 标签
可以用“start”设置从列表数字哪里开始，例如：start="50"就表示列表从50开始

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

输出：

咖啡
牛奶
茶

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

输出：

50.咖啡

51.牛奶

52.茶

3.定义列表：以 <dl>…</dl>标签开始，自定义列表项以 <dt>…</dt>开始，自定义列表项的定义以 <dd>…</dd>开始

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

输出：

计算机

用来计算的仪器 ... ...

显示器

以视觉方式显示信息的装置 ... ...

绝对路径

完整的路径

网址也属于绝对路径

相对路径

指目标相对于当前文件的路径。

在同一个网站下，不同文件之间的位置，如果源文件和引用文件在同一个目录里，直接写引用文件名即可。

两个实战：

1、常见标签的使用

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>糖醋排骨</title>
</head>
<body>
    <h1><b>《糖醋排骨》的制作方法</b></h1>
    <b>菜品名称：</b><b>糖醋排骨</b><br>
    <b>市场价格：</b>26<br>
    <b>会员价格：</b><font color="red">24</font><br>
    <b>使用配料：</b>排骨、糖、醋<br>
    <b>菜品类型：</b>炒菜<br>
    <br>
    <b><em><u>做法：</u></em></b><br>
    1.猪小排洗净，晾干水分备用；<br>
    2.锅内倒少量油，燥热之后，爆香姜片；<br>
    3.放入排骨，一直煸炒到排骨变色后，表面金黄微焦；<br>
    4.此时就可以放入金黄比例中的调料了，顺序是：先放一汤勺料酒，接着两汤勺酱油，三汤勺米醋，最后四汤勺白糖，炒匀；<br>
    5.再倒入能没过排骨的开水，调中小火焖20分钟；<br>
    6.20分钟后调入盐，开大火收汁，收到汁浓色亮时，撇入芝麻点缀即可出锅（锅里剩下的姜片丢掉不用，最后大火收汁时注意多翻动锅内的排骨，避免烧焦哟！）。<br>
    <hr/>
    &copy; 2015  阿婆私房菜
</body>
</html>

2、链接和图片的使用（省略文字部分）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>楚乔传</title>
</head>
<body>
    <font size="5">楚乔传</font><br>
    中国大陆 67集(TV版)/58集(DVD版)<br>
    《楚乔传》是由慈文传媒、蜜淘影业、克顿传媒联合出品的女性励志传奇古装剧。
    由吴锦源执导，嘉纹、杨涛、陈岚编剧，赵丽颖、林更新、窦骁、李沁领衔主演，邓伦、金士杰特邀出演，王彦霖、牛骏峰、黄梦莹、田小洁、孙宁、金瀚、邢昭林、曹曦月、朱圣祎、阮圣文、李若嘉、苗苗等联合出演。<br>
    
    <a href=#d1>第1集</a>
    <a href=#d2>第2集</a>
    <a href=#d3>第3集</a>
    <a href=#d4>第4集</a>

    <p id = d1>
        <img src=file:///D:\Source\素材\1.jpg><br>
        <font size="5">第1集</font><br>
　      摇摇晃晃的囚车上，一名少女正在闭目沉睡。……有人将暖炉放在了她的手里，楚乔便醒了过来，原来是姐妹们在照顾她。<br>
    </p>

    <hr/>

    <p id = d2>
        <img src=file:///D:\Source\素材\2.jpg><br>
        <font size="5">第2集</font><br>
        楚乔伤病还未痊愈，便被宋大娘遣来干活。
        ……
        浓浓的难过夹杂着满满的无奈，倾袭着每一个荆家姐妹的心。<br>
    </p>

    <hr/>

    <p id = d3>
        <img src=file:///D:\Source\素材\3.jpg><br>
        <font size="5">第3集</font><br>
        青山院灵堂肃穆，宇文玥一身孝衣，沉静的面色里透出几分隐隐的忧伤。
        ……
        但楚乔冷漠的神色却让燕洵很不解，楚乔告诉燕洵，自己的哥哥姐姐新丧，自己也朝不保夕，自然高兴不起来。<br>
    </p>

    <hr/>

    <p id = d4>
        <img src=file:///D:\Source\素材\timg.gif><br>
        <font size="5">第4集</font><br>
        宇文玥挑选侍寝婢女的消息很快传了开来，听着小七小八的议论声，楚乔心底里萌生出了求生的新芽。
        ……
        宇文玥不信楚乔会忘记自己亲手杀了她哥哥的仇恨，而楚乔却表示自己已经答应过姐姐，要好好照顾两个妹妹。
    </p>
    
</body>
</html>

标签：Web,链接,...,标签,元素,列表,实训,排骨,Day
来源： https://blog.csdn.net/qq_45337960/article/details/117451091