目录
基本结构
<html>
<head>
<title>标题</title>
</head>
<body>
hello
</body>
</html>- html标签是html文件的根标签。
- head标签写页面属性。
- body标签写页面内容。
- title标签是页面的标题。
常见标签的使用
<!DOCTYPE html><!--申明文件类型-->
<html lang="en"><!--语言为英语-->
<!-- head存放这个页面的一些属性 -->
<head>
<!--meta只有开始标签，是单标签-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--网页标题-->
<title>html笔记</title>
<style>
td{
/* 让页面所有的td标签都剧中 */
text-align: center;
}
</style>
</head>
<!-- body存放这个页面的内容 -->
<body>
<!-- 1.标题标签：h1-h6
这个标签独占一行，标题标签内容回车视为一个空格，多个空格为一个 -->
<!-- <h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6> -->
<!--------------------------------------------------------------------->
<!-- 2.段落标签：p -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, voluptatum ipsa necessitatibus harum mollitia quaerat sequi. Beatae quos unde repellendus ipsum molestiae, voluptate quas laborum enim natus necessitatibus id. Maxime.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque ullam atque quod esse ad recusandae pariatur neque ipsam quasi expedita. Omnis, eveniet ratione. Commodi maxime corporis eius, cupiditate aliquam dolore!</p>
<!--------------------------------------------------------------------->
<!-- 3.换行标签：br 单标签 -->
<p>换行<br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas praesentium velit pariatur neque doloremque distinctio consequuntur ipsa iste sint, dolore sed exercitationem ullam repudiandae culpa quibusdam. Dolores quae officiis eos.</p>
<!--------------------------------------------------------------------->
<!-- 4.格式化标签4种 -->
<!-- 变粗两种 -->
<strong>变粗</strong>
<b>变粗！</b>
<!-- 倾斜两种 -->
<em>倾斜</em>
<i>倾斜</i>
<!-- 删除线两种 -->
<del>删除线</del>
<s>删除线</s>
<!-- 下划线两种 -->
<ins>下划线</ins>
<u>下划线</u>
<!--------------------------------------------------------------------->
<!-- 5.图片标签 img 核心属性：src（必填）-->
<!-- 本地路径 -->
<br>
<img src="../BoKe/image/20200722081817153.jpg" alt="" width="500px" height="700px"> <!--高度和宽度 如果只设一个,另一个会等比例缩放-->
<!--图片链接-->
<br>
<!-- alt属性当图挂了显示的文字，title属性当鼠标悬停于图片上，显示的文字 -->
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.YmgWcV-ySr2GwNPS3vfOfgHaKw?w=190&h=276&c=7&r=0&o=5&pid=1.7" alt="裂了" title="女人">
<!--------------------------------------------------------------------->
<!-- 6.超链接标签:a -->
<!-- target 属性可以创建新的标签页，不会替换当前页-->
<a href="https://www.nbut.edu.cn/" target="_blank">NBUT</a>
<!--------------------------------------------------------------------->
<!-- 7.表格标签 表格更推荐用css -->
<!--
table 表示整个表格
tr表示一行
td表示一个单元格
th表示表头中的一个单元格
-->
<table width="500px" height="300px" border="2px" cellspacing="0" ><!--cellspacing合并两条边框-->
<tr>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>刘</td>
<td>110</td>
</tr>
<tr>
<td>八</td>
<td>119</td>
</tr>
</table>
<!--------------------------------------------------------------------->
<!--8.列表标签-->
<!--
有序列表 ol
无序列表 ul
列表项 li
-->
<h3>列表</h3>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<!--------------------------------------------------------------------->
<!-- 9.表单标签-->
<!-- form 标签 把页面上,用户的操作输入提交服务器-->
<!-- input 标签-->
<input type="text"><!-- 单行文本框 -->
<br>
<input type="password">
<!--单选 按钮-->
<br>
性别:
<input type="radio" name="gender"> 男 <!-- name值相同，就能实现 单个选择-->
<input type="radio" name="gender" checked="checked"> 女 <!--checked 默认选择-->
<!-- 复选框 -->
<input type="checkbox"> 吃饭
<input type="checkbox"> 学习
<input type="checkbox"> 睡觉
<!-- 按钮 -->
<input type="button" value="确定" onclick="alert('life is movie!')">
<!-- 文件选择框-->
<input type="file">
<!--------------------------------------------------------------------->
<!---->
<!-- 10.下拉菜单-->
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
</select>
<br>
<!-- 多行编辑框-->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!--------------------------------------------------------------------->
<!-- 11.无语义标签 -->
<!-- 没有特点含义,可以用在各种场景 -->
<!-- div 默认独占一行 块级元素-->
<!-- span 默认不独占一行 行级元素-->
</body>
</html>以上就是本文的全部内容了。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
