当前位置：首页 > ai >正文

HTML基础（决定页面结构）

ai 2025/9/6 19:50:44

<div><span><p> <h1>我是小王</h1></p></span><span><p> 我叫小王，来自山东，年龄18，在湖北大学读书，学习软件工程专业。</p></span><span><p>这是我的照片<img src="./yangguang.png" width="50px"></p></span><span><p>求职意向：软件工程师</p></span><span><p>联系电话：15698745698</p></span><span><p>邮箱：123</p></span><span><p>我的博客：<a href="https://gitee.com" target="_blank">小王</a></p></span><span><p> <h2>教育背景：</h2></p></span><ol type="1"><li>小学1</li><li>初中2</li><li>高中3</li><li>大学4</li></ol><span><p> <h2>专业技能：</h2></p></span><ul type="disc"><li>算法</li><li>编程</li><li>java</li><li>c++</li></ul></div><div><ol><h3><li>梨园1</li></h3><p>功能建设</p><ul type="disc"><li>1</li><li>2</li></ul><h3><li>梨园2</li></h3><span> <p>kfsj1</p></span><p>kfsj2</p></ol></div>

1.！+回车:快速生成页面内容

<!DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.

<html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管. (有些浏览

器会根据此处的声明提示是否进行自动翻译).

<meta charset="UTF-8"> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码.

name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区

域.

content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并

设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些)

HTML 常见标签

1.注释

2.标题标签

3.段落标签

4.换行标签间隙比段落标签小

5.格式化标签

区别：前者更加强调

6.img标签

_src属性

img标签必须搭配src使用（指定图片路径）

绝对路径：

图片路径：直接文件路径

网络上图片路径：直接复制网络路径

相对路径：

./xxx.png与xx.html同路径

./img/xxx.png

../xxx.png在xx.html上一路径

其他属性

7.超级链接标签：a

href属性

点击跳转，在当前页面打开

target属性

点击跳转，_blank在新的页面打开,默认为_self在当前页面打开

8.表格标签

基本使用

<thead>内容居中且加粗

合并单元格

9.列表标签

无序列表

有序列表

自定义列表

10.表单标签

用表单标签完成服务器的一次交互

form标签与input标签

label 标签

select 标签

textarea 标签

无语义标签

<div><h1>请填写简历信息</h1><form action="https://www.baidu.com"><p><label for="xm">姓名</label><input type="text" id="xm"></p><p>性别<label for="nan">男</label><input type="radio" id="nan" name="sex"><label for="nv">女</label><input type="radio" id="nv" name="sex" checked="checked"></p><p>出生日期<select><option>--请选择年份--</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option></select><select><option>--请选择月份--</option><option>1</option><option>2</option><option>3</option><option>4</option></select></p><p>就读学校<input type="text"></p><p>应聘岗位 <label for="qian">前端</label><input id="qian" name="work" type="radio"><label for="hou">后端</label><input id="hou" name="work" type="radio"></p><p>掌握技能<textarea cols="30" rows="10"></textarea></p><p><input type="radio" id="s"><label for="s">已阅读</label></p><p><a href="#">点击我的状态</a></p><p><h2>请确认：</h2></p><ul type="disc"><li>真实</li><li>有效</li><li>接受</li></ul></form></div>