一、HTML语法
1. 文件结构
<!DOCTYPE html>
<html lang="en"> //文档声明，英文en
<head>
<!-- 文档的头部 -->
<meta charset="UTF-8"> //字符集，表示万国码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
<!-- 主体内容 -->
<!-- 页面内容及标签都放在这个位置 -->
</body>
</html>2. vscode的使用
- ！：生成骨架
- shift+alt+↓：快速复制下一行
- ctrl+s：保存
- ctrl+/：单行注释
二、标签
<body>
<!-- 标签 -->
<!-- 1. 标题标签：从一级标题到六级标题，大小递减，文本均加粗 -->
<h1>一级标题</h1>
<h6>六级标题</h6>
<!-- 2. 段落标签 -->
<p>段落于段落之间有缝隙</p>
<!-- 3. 换行标签：单标签，段之间无缝隙 -->
<br />
<!-- 4. 文本格式化标签 -->
<strong>加粗文字</strong>
<em>倾斜文字</em>
<del>删除线文字</del>
<ins>下划线</ins>
<!-- 5. 盒子标签 -->
<div>每个div独占一行</div>
<span>一行可显示多个span</span>
<!-- 6. 图像标签 -->
<img src="imgs/1.png" alt="">
<!-- src地址用的是url地址not文件路径 -->
<!-- 同级："x.jpg" -->
<!-- 上一级："../x.jpg" -->
<!-- 下一级："imgs/x.jpg" -->
<!-- 7. 超链接标签 -->
<a href="https://www.csdn.net/" target="_self" title="鼠标移到元素上显示的文字">a标签</a>
<!-- _self: 当前窗口；_blank：打开新窗口-->
<!-- 8. 特殊字符 -->
<!-- 大于号 -->>
<!-- 小于号 --><
<!-- 空格符 -->
<!-- 9. 表格 -->
<table>
<!-- table row为一行，table head为标题，table data为主体 -->
<thead>
<tr>
<th>123</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
</tr>
</tbody>
</table>
<!-- 10. 列表 -->
<!-- 有序ordered:有顺序，使用较少 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!-- 无序unordered：使用较多 -->
<!-- 如果想去掉li前面的小点点，需要在css中写list-style-type:none -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- 自定义 -->
<dl>
<dt>1</dt>
<dd>2</dd>
</dl>
<!-- 11. 表单 -->
<form action="url地址" method="提交方式get/post" name="表单域名称">
<!-- 输入文本 -->
<input type="text" name="定义input元素的名称" value="默认显示的文字">
<!-- 单选按钮 -->
<input type="radio" name="" id="">
<!-- 多选按钮 -->
<input type="checkbox" name="" id="">
<!-- 密码：被掩码为黑色小点点 -->
<input type="password" name="" id="">
<!-- 提交按钮 -->
<input type="submit" name="" id="">
<!-- 按钮 -->
<!-- disabled = true表示该按钮被禁用 -->
<button>222</button>
<!-- 下拉框 -->
<select name="" id="">
<!-- selected=selected表示默认被选中 -->
<option value="boy" selected="selected"></option>
<option value="girl"></option>
</select>
<!-- 文本 -->
<textarea name="文本框" id="" cols="30" rows="10">
文本内容
</textarea>
</form>
</body>
三、html5新特性
1. input
<input type="email" name="限制用户必须输入email类型" id="">
<input type="url" name="限制用户必须输入url类型" id="">
<input type="number" name="必须输入数字类型" id="">
<input type="tel" name="手机号码" id="">
<input type="search" name="搜索框" id="">2. 语义化标签
<!-- 新增语义化标签 -->
<!-- 主要针对搜索引擎，移动端更喜欢这些标签 -->
<header>头部标签</header>
<nav>导航标签</nav>
<article>内容标签</article>
<section>定义内容中某个区域</section>
<footer>尾部标签</footer>
3. 多媒体标签
<audio>：用于嵌入音频内容，可以通过 src 属性指定音频文件的 URL。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<video>：用于嵌入视频内容，可以通过 src 属性指定视频文件的 URL。同样可以使用 <source> 元素指定多个不同格式的视频文件。
<video controls width="300" height="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video>
四、综合案例之交友网站注册页面
1. 输出示例
2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册主页</title>
</head>
<body>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
<!-- <div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div> -->
<h3>Welcome to the Community of Friends</h3>
<div style="color:#40B3DF;">HELLO
<span style="background-color:#B4009E;color:#ffffff;">MY FRIENDS！</span>
</div>
<div style="color:#000000;">青春不常在，抓紧谈恋爱</div>
</div>
<table width="800">
<tbody>
<!--第1行-->
<tr>
<td>姓名：</td>
<td><input type="text" /></td>
</tr>
<!--第2行-->
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="man" id="nan"><img src="images/man.jpg" /> <label
for="nan">男</label>
<input type="radio" name="sex" value="man" id="nv"><img src="images/women.jpg" /> <label
for="nv">女</label>
</td>
</tr>
<!-- 第3行 -->
<tr>
<td>生日：</td>
<td>
<select>
<option>--请选择年--</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select>
<option>--请选择日--</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
</td>
</tr>
<!-- 第四行 -->
<tr>
<td>所在地区：</td>
<td>
<input type="text" value="西安" />
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>婚姻状况：</td>
<td>
<input type="radio" name="sex" />未婚
<input type="radio" name="sex" />已婚
<input type="radio" name="sex" />离婚
</td>
</tr>
<!-- 6学历 -->
<tr>
<td>学历：</td>
<td><input type="text" value="学士/硕士/博士" /></td>
</tr>
<!-- 7类型 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" />帅气
<input type="checkbox" />活泼
<input type="checkbox" />幽默
<input type="checkbox" />认真
<input type="checkbox" checked="checked" />都喜欢
</td>
</tr>
<!-- 8自我介绍 -->
<tr>
<td>自我介绍：</td>
<td>
<textarea rows="10"></textarea>
</td>
</tr>
<!-- 9注册 -->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册" />
</td>
</tr>
<!-- 10我同意 -->
<tr>
<td></td>
<td><input type="checkbox" />我同意注册条款和会员加入标准</td>
</tr>
<!-- 11注册注意事项 -->
<tr>
<td></td>
<td>
<a href="#">注册条款和加入标准</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
</td>
</tr>
<tr>
<td></td>
<td>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻求另一半</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
6804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
