HTML基础知识

最新推荐文章于 2024-08-23 02:13:46 发布

今天会下雨吗

最新推荐文章于 2024-08-23 02:13:46 发布

阅读量264

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_45663697/article/details/101352770

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.跳转链接标签：
（1）a-> 双标签
1)属性：
href : 定义链接地址
target : 改变链接打开方式，默认情况下在当前页面打开：_self 在新窗口打开：_blank
（2）base -> 单标签：改变链接的默认行为，可使多个网页链接在新窗口打开，不需要再每个链接后写上target属性。

代码演示：
跳转链接标签代码演示在这里插入图片描述
2.实现不同链接的跳转练习：
编写三段HTML程序：大灰狼.html、小绵羊.html、小红帽.html(名字任起),将其中两个文件保存到一个文件夹中，另一个文件保存在根目录

大灰狼.html

小绵羊.html

小红帽.html

3.跳转锚点：为一个很长的网页做一个导航，点击导航内的链接，跳转到当前页面的某一个位置，该位置即为锚点。
实现方式：（1）#号、id属性
在这里插入图片描述
（2）#号、name属性

1.无序列表标签：
（1）无序列表 -> ul li 符合嵌套规范
（a）ul、li必须组合出现，他们之间不允许有其他标签
在这里插入图片描述
错误示例：

运行结果：

（b）type属性：改变前面标记的样式

（2）练习

2.有序列表
（1）ol、li:列表最外层容器，列表项
有序列表用的较少，可用无序列表代替有序列表
ol、li成对出现，他们之间不能嵌套其他标签
在这里插入图片描述

3.定义列表：
dl :定义列表
dt :定义专业术语名词
dd :对名词进行解释和描述
（a）演示

4.嵌套列表：

5. 表格标签：
（a）<tr> ：定义表格行
（b）<th>：定义表头
（c）<td>：定义表格单元
（d）<caption>：表格标题
（e）<table> ：表格最外层容器
语义化标签：<tHead>、<tBody>、<tFood>不会对代码产生效果性影响
注：在一个<table>中<tBdoy>可以出现多次，但是<tHead>、<tFood>只能出现一次

<!DOCTYPE html>
<html>
<meta charest="UTF-8">
<title>表格标签</title>
<body>
	<table>
		<caption>天气预报</caption>
		<tHead>
			<tr>
				<th>日期</th>
				<th>天气情况</th>
				<th>出行情况</th>
			</tr>
		</tHead>
		<tBody>
			<tr>
				<td>2019年1月20日</td>
				<td>太阳</td>
				<td>天气晴朗，适合出门</td>
			</tr>
			<tr>
				<td>2019年5月4日</td>
				<td>阴天</td>
				<td>可能下雨，出门带伞</td>
			</tr>
		</tBody>
		<tFood>
			<tr>
				<td>云城实时播报</td>
			</tr>
		</tFood>
	</body>
	</html>

在这里插入图片描述
6.表格属性
（1）<border> ：表格边框
（2）<cellpadding> ：单元格内的空间
（3）<cellspacing> ：单元格之间的空间
（4）<rowspan> ：合并行
（5）<colspan> ：合并列
（6）<align> ：左右对齐方式
left、center、right
（7）<valign> ：上下对齐方式
top、middle、bottom
练习：

<!DOCTYPE html>
<html>
<head>
    <meta charest="UTF-8">
    <title>表格标签综合练习</title>
</head>
<body>
    <table border="1" cellpadding="4" cellspacing="0">
        <tHead>
            <tr>
                <th>班级名次</th>
                <th>科目</th>
                <th>授课内容</th>
                <th>增值服务</th>
                <th>课时</th>
                <th>价格</th>
                <th>试听</th>
                <th>购买</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td rowspan="3"><strong>真题精解班</strong></td>
                <td>行测+科目</td>
                <td>全科历年真题精解</td>
                <td rowspan="3">课后赠两套模拟卷24小时以内答疑</td>
                <td>48</td>
                <td>1280元</td>
                <td>耳机</td>
                <td>购物车</td>
            </tr>
            <tr>
                <td>行测</td>
                <td>行测历年真题精解</td>
                <td>32</td>
                <td>980元</td>
                <td>耳机</td>
                <td>购物车</td>
            </tr>
            <tr>
                <td>申论</td>
                <td>申论历年真题精解</td>
                <td>16</td>
                <td>580元</td>
                <td>耳机</td>
                <td>购物车</td>
            </tr>
        </tBody>
        <tBody>
            <tr>
                <td rowspan="3"><strong>高分技巧班</strong></td>
                <td>行测+申论</td>
                <td>全科技巧强化</td>
                <td rowspan="3">入学试卷测评24小时以内答疑</td>
                <td>32</td>
                <td>980元</td>
                <td>耳机</td>
                <td>购物车</td>
            </tr>
            <tr>
                <td>行测</td>
                <td>行测速解技巧强化</td>
                <td>18</td>
                <td>680元</td>
                <td>耳机</td>
                <td>购物车</td>
            </tr>
            <tr>
                <td>申论</td>
                <td>申论速解技巧强化</td>
                <td>14</td>
                <td>580元</td>
                <td>耳机</td>
                <td>购物车</td>
            </tr>
        </tBody>
    </table>

</body>   
</html>

在这里插入图片描述
7.表单标签
（1）<textarea>:多行文本框
（2）<select>、<option>:下拉菜单
（3）<label>:辅助表单
（4）<from>：表单最外层容器，<from>有action属性
（5）<input>：用于搜索用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。<input>有type属性

type属性	含义
text	普通的文本输入框
password	密码输入框
radio	单选框
checkbox	复选框
file	上传文件
submit	提交按钮
reset	重置按钮
placeholder	提示要输入的信息
checked	默认选中
disable	禁止选择
multiple	多选

（3）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <from action="http://www.baidu.com">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框：</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox" checked>香蕉
        <input type="checkbox" disabled>猕猴桃
        <h2>单选框：</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件：</h2>
        <input type="file">
        <h2>提交和重置按钮：</h2>
        <input type="submit">
        <input type="reset">
        <h2>多行文本框</h2>
        <textarea cols="30" rows="30"></textarea>
        <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option><!--"selected"：默认选择、"disabled"：不能选择-->
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
        </select>
        <selet size="3"><!--"size":显示下拉菜单项数-->
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
        </selet>
        <select multiple><!--"multiple":多选属性-->
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
        </select>
        <input type="radio" name="gender" id="man"><label for="man">男</label><!--"label":使得鼠标点击“男”的时候也能选择-->
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>
    </from>
</body>
</html>

8.表格表单组合实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单表格标签综合练习</title>
</head>
<body>
    <form>
        <table border="1" cellpadding="4" cellspacing="0">
            <tbody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                    <!--"总体信息"、"用户注册"在代码上的先后顺序跟网页上出现的一致-->
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td>
                        <input type="text" placeholder="请输入用户名">
                    </td>
                </tr>
                <tr align="right">
                    <td>密码：</td>
                    <td>
                        <input type="text" placeholder="请输入密码">
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;<!--&nbsp：空格-->
                        <input type="reset">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

在这里插入图片描述
9. <div>与<span>
（1）<div>(块) ：<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。HTML中的大多数标签都可以嵌套在<div>标签中，<div>标签还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
（2）<span>（内联）：用来修饰文字的，给文字添加颜色之类。
注：<div>与<span>都是没有任何默认样式的，需要配合CSS才行。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>div标签</title>
    </head>
    <body>
         <div style="border:1px gray solid;">
            <h2><a href="#"><span style="color:blue">网页制作</span> - 脚本之家</a></h2>
            <a href="#"><img src="https://img04.sogoucdn.com/v2/thumb/resize/w/120/h/80/zi/on/iw/90.0/ih/60.0?t=2&url= https%3A%2F%2Fwww.jb51.net%2Fdo%2Fuploads%2Flitimg%2F180606%2F142A32M4Q.jpg&appid=200524&referer=http%3A%2F%2Fwww.jb51.net%2Fhtml5%2F"></a>
            <p><span style="color: red">HTML5</span>是下一代<span style="color: red">HTML</span> 标准。2014年10月由万维网联盟（W3C）完成标准制定。
                <span style="color: red">HTML5</span>的设计目的是为了在移动设备上支持多媒体。<span style="color: red">HTML5</span>  是W3C 与WHATWG 合作的结...</p>
            <a href="#">脚本之家 - www.jb51.net/h... - 2019-9-4 - 快照</a>
        </div>
    </body>
</html>