学习日记7.19

一、学习内容

1. HTML基础标签:标题标签(h1~h6)、段落标签(p)
2. 中文编码(GBK、UTF-8)和相对路径与绝对路径


二、代码的编辑

1.相对路径的举例
以图片为例,引用的图片在同一级:
引用的图片在此文件夹中下一个文件夹:
引用的图片在此文件夹的上一层文件夹:
2.一个网站简单页面

代码段为:


<html>
<head>
    <title>HTML教程title>
    <meta charset="utf-8">
    <style type="text/css">
        .tiy {
            background-color: #e9686b;
            text-align: center;
            padding-top: 10px;
            color: #fff;
            width: 130px;
            height: 30px; 
        }
    style>
head>
<body style="font-family: '微软雅黑';font-size: 14px">
    <h1>HTML教程h1>
    <button>上一节button>
    <button>下一节button>
    <hr>
    <h2>HTML教程<br>在本教程中,你将学习如何使用HTML来创建站点。<br>HTML很容易学习!你会喜欢它的!h2>
    <p><a href="http://www.w3school.com.cn/html/html_jianjie.asp" style="color: red;">现在开始学习HTMLa>!p><hr>
    <h2>HTML实例h2>
    <p>学习100个实例!使用我们的编辑器,你可以编辑HTML,然后点击测试按钮来查看结果。p>
    <p class="tiy"><a href="" style="color: #fff;margin: 0px;padding: 0px;">亲自试一试吧a>p><hr>
    <h2>HTML测验h2>
    <p>在W3School测试你的HTML技能!p>
    <a href="" style="color: red;">开始HTML测验a>!<hr>
    <h2>HTML参考手册h2>
    <p>在W3School,我们提供完整的HTML参考手册,其中包括标签、属性、颜色、实体等等。<hr><a href="" style="color: red;">HTML参考手册a>p><hr>
    <button>上一节button>
    <button>下一节button><hr>
    <textarea style="background-color: #e0e0e0;padding: 0px;margin: 0px;width: 400px;height: 200px;">
    textarea><hr>
body>
html>

运行结果:

学习日记7.19_第1张图片

3.简单的表单
代码段为:


<html>
<head>
    <title>title>
    <meta charset="utf-8">
head>
<body>
    <form action="aa.php" method="get">
        <fieldset>
        <legend>报名表:legend>
        <span>姓名:span><input type="text" name="vname" size="5"><br><br>
        <span>年龄:span><input type="text" name="" size="5"><br><br>
        <span>出生年月日:span><input type="date" name="" size="50"><br><br>
        <span>性别:span><input type="radio" name="sex" value="男"><span>span><input type="radio" name="sex" value="女"><span>span><br><br>
        <span>电话号码:span><input type="tel" name="tale"><br><br>
        <span>爱好:span><input type="checkbox" name="bask"><span>篮球span<input type="checkbox" name="foot"><span>足球span<input type="checkbox" name="pai"><span>排球span><br><br>
        <span>电子邮件:span><input type="email" name="mail"><br><br>
        <span>家庭住址:span><input type="text" name="ff">
        fieldset>
    form>
form>
body>
html>

运行结果:
学习日记7.19_第2张图片

三、学习心得

今天主要学了HTML的中文编码格式,帮助我们解决了网页乱码的问题,所有的中文通用的编码格式为UTF-8,还有HTML中的相对路径与绝对路径,总体而言掌握的还可以,只有将基础打好才能为后面的学习做好基础,通过自学加深对知识的了解。


四、HTML标签参考

https://www.w3cschool.cn/html/dict

你可能感兴趣的:(学习日记)