HTML网页设计课程第一次作业

第一阶段课程是简单的学习一些基础的HTML知识，简单了解了各个标签的作用然后后续再学习了css后进行改进。

效果如下：

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七旬“斗拱爷爷”让古建筑“跳”出课本 不再“冷门”</title>
    <style type="text/css">
        
        #divword
        {
            width: 700px;
            
        }

    </style>
</head>
<body>
    <h1>七旬“斗拱爷爷”让古建筑“跳”出课本 不再“冷门”</h1>
    <hr/>
    <div id="divword">
        <p>
         斗拱是中国古代一种特有的建筑结构，在立柱和横梁的交接处，从柱顶上“探出”一层层弓形的承重结构，为拱；拱与拱之间垫的方形木块，为斗，合称斗拱。在王永先看来，要让更多人了解冷门的古建筑知识，斗拱结构是一个合适的突破口。因此，王永先有了“斗拱爷爷”的称号。一起走进“斗拱爷爷”的故事↓↓↓
    </p>
    <video src="../素材/video/斗拱爷爷.mp4" style="width: 500px;" controls="controls"></video>
        <p>
        接地气的语言，一副黑框眼镜，一身中山装，一双老布鞋，借助自制斗拱模型进行现场实地讲解，王永先开启了他的“古建筑斗拱学堂”。说起跟古建的结缘，王永先说跟他小时候的生活环境密不可分。
    </p>
    
    <img src="../素材/img/一.jpeg" alt="图片1" width="700px">
    <p>
        <strong>王先生：</strong>从小生于山西，长于山西。因此，从小到青年时期，耳濡目染，到处都是古建筑。村村都有庙，从小对古建筑有一种与生俱来的亲切感。
    </p>
    <img src="../素材/img/二.jpeg" alt="图片2" width="700px">
    <p>
        1972年，22岁的王永先进入山西文物系统，从事测绘、修复、普查、管理工作。多年来，他一直在和古建打交道，但至今仍记得刚参加工作不久，第一次见到唐代古建佛光寺时的震撼。
    </p>
    <img src="../素材/img/三.jpeg" alt="图片3" width="700px">
    <p>
        <strong>王先生：</strong>第一次到佛光寺，一登上台阶，短促的距离，突然一座大殿就呈现在面前了。厚重的屋顶，硕大的斗拱，还有粗壮的柱子，面阔七间大殿，一下就被震撼到了。
    <img src="../素材/img/四.jpeg" alt="图片4" width="700px">
    <p>
        一次心灵的震撼，王永先把古建变成了自己一辈子的爱好。在之后的工作中，他实地考察了山西数百座古建筑，撰写了大量勘察笔记，工作中遇到老工匠随口聊古建的工作口诀，王永先就像淘到宝贝一样，马上记到随身携带的笔记本上。
    </p>
    <p>
        <strong>王先生：</strong>我们老祖宗有这么了不起的古建筑，好像5000年的文明突然就到了我的心里边了，自己感觉到非常饱满，非常充实。
    </p>
    

</body>
</html>

基础有用的标签如下：

一、head标签：

1.title标签：<title></tltle>之间的内容为网页最上面显示的标题

2.style标签：<style>主要是定义元素的css样式，一般是

 <style type="text/css">
/*这里写css样式*/
</style>

3.link标签：用于引入外部样式文件（css文件）

二、body标签

1.标题标签：各种级别的标签，大小不同，

<h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>

2.段落标签：

（一）p标签<p> </p>:如最上面图片作业表示的一样，标签里面的表示一段文本。

（二）换行标签<br/>:会自动换行。

（三）文本标签：

（1）粗体标签：strong、b
（2）斜体标签：i、em、cite
（3）上标标签：sup
（4）下标标签：sub
（5）中划线标签：s
（6）下划线标签：u
（7）大字号标签：big
（8）小字号标签：smal

（四）水平线标签<hr/>

<h3>静夜思</h3>                  
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
    <hr/>
    <h3>春晓</h3>                  
    <p>春眠不觉晓，处处闻啼鸟。</p>
    <p>夜来风雨声，花落知多少。</p>

（五）div标签：表示一个区域。

三、列表

1.有序列表：有序列表中的各个列表项是有顺序的。有序列表从<ol>开始，到</ol>结束。而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。

<ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>

可以用type属性来改变列表项符号。

2.无序列表：无序列表的列表项是没有顺序的，默认情况下，无序列表的列表项符号是●，使用<ul></ul>标签表示一个无序列表的开始和结束。

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

我们也可以使用type属性来定义列表项符号，在无序列表中，type属性取值如下表所示。

3. 定义列表：定义列表由两部分组成：名词和描述。在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，dt标签用于添加要解释的名词，而dd标签用于添加该名词的具体解释。

        <dt>小红</dt>
        <dd>美丽的女孩</dd>
        <dt>小帅</dt>
        <dd>高富帅</dd>
        <dt>小张</dt>
        <dd>老实本分</dd>

四、表格

一个表格一般会由以下3个部分组成。

（1）表格：table标签
（2）行：tr标签
（3）单元格：td标签

1.<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而<td>和</td>表示单元格的开始和结束。

2.表格一般都会有一个标题，我们可以使用caption标签来实现。一个表格只能有一个标题，也就是只能有一个caption标签。

3.在HTML中，单元格其实有两种：表头单元格，使用th标签；表行单元格，使用td标签。

4.thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。

 <table>
        <caption>考试成绩表</caption>
        <thread>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
            </tr>
        </thread>
        <tbody>
            <tr>
            
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
        </tfoot>
        
    </table>

5.我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。

6.我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并。

<table>
        <tr>
            <td colspan="2">前端开发技术</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>jQuery</td>
        </tr>
    </table>

五、图片

我们可以用img标签来显示一张图片，我们只需要掌握他的三个属性：src，alt和title。

1.src属性：用于指定图片所在路径，可以是相对路径也可以是绝对路径。绝对路径则是该图片所在文件夹的位置，但图片一旦移动这个路径就不能用。相对路径则是相对于HTML文件所在文件夹图片的位置。如果上一级则要如上面图片那样../+地址。

2.alt属性：用于图片描述，这是给搜索引擎看的。当图片无法显示，页面会出现alt中文字。

3.title属性：用于图片描述，该描述文字是给用户看的。鼠标放在图片上会出现title中的文字。

4.图片格式：一种叫位图，一种叫矢量图。

（一）对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。在实际开发中，最常见位图的图片格式有3种：jpg（或jpeg）、png、gif。深入理解3种图片适合在哪种情况下使用，在前端开发中是非常重要的。

（1）jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。
（2）png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。
（3）gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ或微信上发的动图都是gif格式的。

如果想要展示色彩丰富而高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式。

（二）矢量图：又叫做“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像最大的优点是图片无论放大、缩小或旋转等都不会失真。最大的缺点是：难以表现色彩丰富的图片效果（非常差）。

六、超链接

1.在HTML中可以用a标签来实现超链接.。target用来定义超链接打开窗口方式。_blank表示在新窗口打开链接。

<a herf="链接地址" target="_blank">文本或者图</a>

2.在HTML中，超链接有两种：一种是外部链接；另外一种是内部链接。外部链接指向的是“外部网站的页面”，而内部链接指向的是“自身网站的页面”。上一节我们接触的就是外部链接，这一节我们来学习一下内部链接。

七、表单

1.在HTML中，表单标签有5种：form、input、textarea、select和option。

根据外观划分可以分为以下八种：

（1）单行文本框
（2）密码文本框
（3）单选框
（4）复选框
（5）按钮
（6）文件上传
（7）多行文本框
（8）下拉列表

2.from标签：创建一个表单，我们也必须要把所有表单标签放在form标签内部。其属性如下

3.input标签：

（一）单行文本框value设置的是文本框默认值，如果没设置则为空白，size则是设置文本框长度，maxlength是文本框最多可以输入字符数量。

（二）密码文本框可以看成一个特殊的单行文本框，密码文本框输入内容不可见。

（三）单选框

<input type="radio" name="组名" value="取值" />

性别:
        <input type="radio" name="gender" value="男" />男
        <input type="radio" name="gender" value="女" />女

（四）复选框

将type属性取值为checkbox

<input type="checkbox" name="组名" value="取值" />