HTML的文档结构与标签的使用--2019年7月2日 - 作业

Home > List of blog posts > HTML的文档结构与标签的使用--2019年7月2日

Blogger Information

Blog 39

fans 0

comment 0

visits 34015

Special Recommendation

More>

Related recommendations

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="html文档测试20190702">
    <title>HTML文档结构</title>
</head>
<body>
<h1>20190702:html文档结构测试</h1>
<p>lang属性设置该文档的内容使用的语言,部分浏览器会依赖它进行翻译提示</p>
<p>head标签是文档的头部声明和页面描述信息,除标题外, 其余内容对用户不可见, 供浏览器和搜索引擎读取</p>
<p>meta标签用来设置页面的元数据(描述),例如关键字,页面描述,作者等</p>
<p>charset属性是你在编写和存储这个html文档时, 使用的编码集</p>
<p>title标签是显示在浏览器标签页内的文本内容,用来提示用户当前页面的基本信息</p>
<p>body标签为文档主体，其内容会显示在当前浏览器的窗口中</p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2、HTML基本标签的使用

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML标签</title>
</head>
<body>
<h1>20190702:html标签使用</h1>
<h2>标题标签：h1-h6</h2>
<p>段落标签：p</p>
<p>换行标签：br 进行换行</p>
<p>分隔线标签：hr 进行分隔</p>
<hr>
<h3 style="color:green">链接标签：a</h3>
<a href="http://www.php.cn/">php中文网：默认当前页面打开</a>
<br>
<a href="http://www.php.cn/" target="_self">php中文网: 默认值是_self，默认当前页面打开</a>
<br>
<a href="http://www.php.cn/" target="_blank">php中文网:  _blank 新窗口打开</a>
<br>
<a href="http://www.php.cn/" target="_parent">php中文网: _parent 父窗口打开</a>
<br>
<a href="http://www.php.cn/" target="_top">php中文网:  _top 顶层窗口打开</a>
<hr>
<h3 style="color:blue">图像标签：img</h3>
<img src="image/girl.jpg" alt="人物" width="500" title="漂亮的小姐姐">
<p>宽度和高度设置一个即可, 另一个会按比例自动调整</p>
<p>图像的alt属性是一定要有的,因为搜索引擎 和 屏幕阅读器都是依赖这个元素来获取图片的内容与介绍</p>
<p>图片是外部资源, html文档无法直接提供内容, 所以对于外部资源, html大多是通过单标签进行加载</p>
<p>html是通过单标签中的属性指定要加载的外部资源的地址</p>
<p>可以是本地的图片, 也可以是一个网络图片</p>
<hr>
<h2 style="color:red">快捷键记录：</h2>
<p>ctrl+d:用于行复制</p>
<p>alt+鼠标左键:多行编辑</p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3、HTML列表标签的使用

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<h1>20190702:HTML--列表标签</h1>
<h2>无序列表：ul</h2>
<ul>
    <li>html</li>
    <li>css</li>
    <li>JavaScript</li>
</ul>
<hr>
<h2>有序列表：ol</h2>
<ol>
    <li>php</li>
    <li>java</li>
    <li>c++</li>
</ol>
<hr>
<h2>定义列表：dl</h2>
<dl>
    <dt>php</dt>
    <dd>脚本语言</dd>
    <dt>mysql</dt>
    <dd>数据库</dd>
    <dt>ThinkPHP</dt>
    <dd>PHP框架</dd>
</dl>
<hr>
<h2>emmet生成无序列表: ul#list>li.item*5>a{列表$@1}</h2>
<ul id="list">
    <li class="item"><a href="">列表1</a></li>
    <li class="item"><a href="">列表2</a></li>
    <li class="item"><a href="">列表3</a></li>
    <li class="item"><a href="">列表4</a></li>
    <li class="item"><a href="">列表5</a></li>
</ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

4、HTML表格标签的使用

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<p>border: 表格与单元格添加边框</p>
<p>cellspacing: 设置单元格与表格之间的间隙大小,0为折叠</p>
<p>cellpadding: 设置单元格内容与单元格之间的内边距, 不要太拥挤</p>
<p>width: 设置表格的宽度, 可以使用相对值:百分比</p>
<p>align: 设置对齐方式,居中, 居左,居右</p>
<p>bgcolor: 设置背景色</p>
<p>colsapn: 单元格在列方向上(水平)的合并</p>
<p>rowspan: 单元格在行的方向(垂直)合并</p>
<hr>
<table border="1" align="left" cellspacing="0" cellpadding="5" >
    <caption>表格标题</caption>
    <!--    表格头部, <thead>只允许一个 -->
    <thead>
    <tr bgcolor="aqua">
        <th>编号</th>
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>金额</th>
    </tr>
    </thead>
    <!--    表格主体, <tbody>可以有多个-->
    <tbody>
    <tr align="center">
        <td width="50">1</td>
        <td width="200">苹果</td>
        <td width="100">5</td>
        <td width="50">2</td>
        <td width="100">10</td>
    </tr>
    <tr align="center">
        <td>2</td>
        <td>香蕉</td>
        <td rowspan="2">3</td>
        <td>5</td>
        <td>15</td>
    </tr>
    <tr align="center">
        <td>3</td>
        <td>桃子</td>
        <td>2</td>
        <td>6</td>
    </tr>
    </tbody>
    <!--    表格底部, tfoot也只允许有一个 -->
    <tfoot>
    <tr align="center">
        <td colspan="3" >总计：</td>
        <td>9</td>
        <td>31</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

5、HTML表单与表单中的控件元素的使用

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单与表单中的控件元素</title>
</head>
<body>

<p>action:定当提交表单时向何处发送表单数据。</p>
<p>method:规定用于发送 form-data 的 HTTP 方法。get/post</p>
<p>name:规定表单的名称。</p>
<p>for:规定 label 绑定到哪个表单元素。</p>
<p>autofocus:自动获取焦点</p>
<p>placeholder:规定帮助用户填写输入字段的提示</p>
<p>required:指示输入字段的值是必需的。</p>
<p>max:规定输入字段的最大值。</p>
<p>min:规定输入字段的最小值。</p>
<p>checked：规定此 input 元素首次加载时应当被选中。</p>
<p>maxlength:规定输入字段中的字符的最大长度。</p>
<hr>
<h3>用户注册</h3>
<form action="" method="get" name="form1">
    <p>
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" placeholder="用户名不能为空" autofocus required>
    </p>
    <p>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="密码由字母和数字组成" autofocus>
    </p>
    <p>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" placeholder="test@qq.com" required>
    </p>
    <p>
        <label for="age">年龄：</label>
        <input type="number" id="age" name="age" min="10" max="100">
    </p>
    <p>
        <label for="birthday">出生日期：</label>
        <input type="date" id="birthday" name="birthday">
    </p>
    <p>
        <!--        select: 下拉列表,也叫下拉框,与前面表单控件不一样,它的值都是预置的,不需要用户输出,是枚举类型-->
        <!--        与其它input元素不同, 它的name和value属性分别在二个标签中: name在select中, value在option中-->
        <label for="course">课程：</label>
        <select name="course" id="course" size="1"><!--        默认显示是一个,可以用size设置-->
            <option value="0">请选择</option>
            <option value="1" selected>php</option> <!--            selected: 设置默认选项-->
            <option value="2">mysql</option>
            <option value="3">java</option>
            <optgroup label="前端"> <!--            选择支持分组-->
                <option value="4">html</option>
                <option value="5">css</option>
                <option value="6">javascript</option>
            </optgroup>
        </select>
    </p>
    <p>
        <label>爱好：</label>
        <input type="checkbox" id="game" name="hobby[]" value="game" checked><label for="game">打游戏</label>
        <input type="checkbox" id="run" name="hobby[]" value="run"><label for="run">跑步</label>
        <input type="checkbox" id="swim" name="hobby[]" value="swim"><label for="swim">游泳</label>
    </p>
    <p>
        <label>性别：</label>
        <input type="radio" name="gender" value="male" id="male" checked><label for="male">男生</label>
        <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label>
    </p>
    <p>
        <label for="comment">简介：</label>
        <textarea name="comment" id="comment" cols="50" rows="10" maxlength="100" placeholder="不超过100字"></textarea>
    </p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">

        <input type="button" name="button" value="普通按钮1">

        <button>默认为提交按钮</button>

        <button type="button">普通按钮2</button>
    </p>

</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：通过这节课，我认识了一些常用的HTML标签及其属性，这些标签和属性需要平时多用多练，不然很容易忘记。同时我也学会了一些简单的快捷键操作和Emmet操作，虽然对Emmet的操作不大熟悉，但是我可以多加练习。附上网上查找的有关Emmet的基本使用方法的网址：https://www.iteye.com/news/27580

Correction status：qualified

Teacher's comments：代码写得很工整

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

二级菜单--2019/07/19

2019-07-24 00:22:57