收藏
天蓬老师批改状态：合格
老师批语：很好
1.本机安装vscode，chrome并安装推荐插件完成；
2.html文档结构；
在vscode上新建文档命名为XX.html，编辑文档输入快捷指令 ！或 html:5 按回车键Enter生成;
<!-- 标明此文档为html格式 --><!DOCTYPE html><!-- <html>...</html>:html根标签，根元素，代表整个html文档 --><!-- lang 设置文档主体语言 en：英文 zh-cn：中文简体 --><html lang="en"><!-- <head>...</head>头元素：不在页面显示，给搜索引擎使用，可在里面插入CSS或JS --><head><!-- 文档编码集常用编码utf-8，gb2312 不分大小写 --><meta charset="UTF-8" /><!-- viewport： 视口，当前文档在浏览器中可以被用户看到的部分 --><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- title 页面标题/页面命名 --><title>Document</title></head><!-- <body>...</body>主体元素：页面用户可视化源码编译内容 --><body></body></html>
3.元素与属性的关系；
改变元素中的属性值使整个标签发生变化；
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 起始标签 --><div style="font-size: 24px; color: #333;">元素属性<!-- 结束标签/闭合标签 --></div></body></html>
4.语义化的结构元素
页眉标签：header ；
主体标签：main ；
页脚标签：footer ；
导航标签： nav ；
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 页眉 --><header><!-- 导航 --><nav><a href="">首页</a><a href="">导航</a><a href="">栏目</a></nav></header><!-- 主体 --><main><section class="">广告</section><section class="">内容区</section><section class="">推荐</section></main><!-- 页脚 --><footer><nav><a href="www.baidu.com">百度</a><a href="pnp.cn">php中文网</a></nav></footer></body></html>
5.语义化的文本元素
走马灯单行本：marquee
删除线：s
下划线：u
进度条：progress
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><marquee style="width: 80px;">走马灯单行</marquee><s>删除</s><u>下划线</u></br><progress value="65" max="100">进度条</progress></body></html>
6.链接元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 跳转链接；target="_blank" 为新窗口打开链接，不添加为在原先窗口跳转链接 --><a href="http://www.baidu.com">百度</a><!-- 下载链接以文件格式不同，添加html可识别的download格式说明 --><a href="0726.rar">下载</a><!-- 电话链接：在想拨打打号码前面加上tel：；大多适用于手机 --><a href="tel:110">电话</a><!-- 邮件链接：在想发送的目标邮件前加上mailto：；得操作端口启动邮件客服端或APP --><a href="mailto:944366340@qq.com">邮箱</a><!-- 锚点链接：在原页面上实现跳转 --><a href="#id">锚点</a><h3 style="margin: 1000px 0;" id="id">锚点目标</h3></body></html>
7.列表元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 无序列表 --><ul><li>css</li><li>html</li><li>js</li></ul><!-- 有序列表 --><ol start="2"><li>早餐</li><li>午餐</li><li>晚餐</li><li>宵夜</li></ol><!-- 自定义列表 --><dl><!-- 列表项标题 --><dt>标题</dt><!-- 列表项内容 --><dd>内容1</dd><dd>内容2</dd><dt>标题2</dt><dd>这内容就一个</dd></dl><!-- 语义化写法：通常用来写页脚 --><dl><dt>电话：</dt><dd>110</dd></dl></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
