seo软件优化工具软件,seo在网站建设中的作用,wordpress的cute主题破解版,建筑企业设计公司p.s.这是萌新自己自学总结的笔记#xff0c;如果想学习得更透彻的话还是请去看大佬的讲解 目录 三件套标签标题标签段落标签文本格式化标签图像标签超链接标签锚点链接默认链接地址 音频标签视频标签 HTML基本骨架综合案例-个人简介列表表格表单input标签单选框radio上传…p.s.这是萌新自己自学总结的笔记如果想学习得更透彻的话还是请去看大佬的讲解 目录 三件套标签标题标签段落标签文本格式化标签图像标签超链接标签锚点链接默认链接地址 音频标签视频标签 HTML基本骨架综合案例-个人简介列表表格表单input标签单选框radio上传文件file多选框checkbox下拉菜单文本域label标签按钮无语义的布局标签字符实体 综合案例-写一个注册信息 三件套 Web三件套功能说明 1. HTML超文本标记语言 核心功能定义网页的内容与结构如标题、段落、列表、图片等元素的层级关系。 实现方式通过标签搭建文档骨架形成树状结构供浏览器解析 2. CSS层叠样式表 核心功能控制网页的外观与布局包括颜色、字体、间距、响应式设计等视觉效果。 实现方式通过选择器如类、ID和属性如 color、margin为HTML元素添加样式规则 3. JavaScriptJS 核心功能实现网页的交互与动态功能如表单验证、数据更新、动画效果等。 实现方式通过操作DOM文档对象模型动态修改页面内容或通过事件监听如点击、输入响应用户行为。 。 HTML负责结构CSS控制样式JavaScript处理交互和动态功能。 三者共同构建完整的Web页面HTML提供内容基础CSS提升视觉体验JavaScript增强交互性形成现代Web开发的核心技术体系。 。 比喻说明HTML是骨骼CSS是皮肤JavaScript是器官 标签 HTML:超文本标记语言 超文本即链接 标记也叫标签即带尖括号的文本 语法:/strong 需要加粗的文字 strong
双标签标签通常成对出现中间包裹内容 单标签只有开始标签没有结束标签 里面 放英文字母(标签名) 结束标签比开始标签多/
举例
strongHello World/strong!-- 这是一个注释它不会在浏览器中显示 --!-- 换行(注意浏览器不识别代码中的Enter换行) --brstrongHello World/strong!-- 添加水平线 --hr嵌套关系一个标签里面包含了其他标签的写法 并列关系两个平级别的标签
举例
html!-- 嵌套关系 --head/headbody/body!-- 平级关系 --
/html标题标签
标签名:h1~h6(双标签) 特点文字加粗、字号逐渐缩小、独占一行(换行) h1标签在一个网页中尽量只用一次用来放新闻标题或网页logo h2之后的无限制使用 bodyh1Hello World/h1h2Hello World/h2
/body段落标签
一般用在新闻段落、文章段落、产品描述信息等 标签名:p(双标签) 特点独占一行、段落之间存在间隙
bodyp这是萌新自己自学总结的笔记如果想学习得更透彻的话还是请去看大佬的讲解/p!-- 段落之间有间隙 --p这是萌新自己自学总结的笔记如果想学习得更透彻的话还是请去看大佬的讲解/p
/body文本格式化标签
为文本添加特殊格式以突出重点。常见的文本格式加粗、倾斜、下划线、删除线等 bodystrong加粗/strong
br
em倾斜/em
br
ins下划线/ins
br
del删除线/del/body图像标签
在网页中插入图片 标签名img src图片的URL src用于指定图像的位置和名称是图像标签的必须属性 属性名“属性值” 属性写在尖括号里标签名后面标签名和属性之间用空格分开不区分先后顺序 bodyimg src./1.1.jpg alt123 title我老婆 width50 height50
img src./1.1.jpg alt123 title我老婆 width100 height100/body超链接标签
点击跳转其他页面
!-- 将此窗口跳转到b站 --
a hrefhttps://www.bilibili.com/点击此处跳转b站/a!-- 新开一个窗口跳转 --
a href1.1.jpg target_blank点击此处跳转/a!-- herf写#表示一个空连接 --
a href# 点击/a锚点链接 锚点链接 默认链接地址 默认链接地址 音频标签
标签名audio src音频的URL/audio src用于指定音频的位置和名称是音频标签的必须属性 bodyaudio src2023-09-24%2016-07-36.mp3 controlscontrols/audio
audio src2023-09-24%2016-07-36.mp3 controls/audio
!-- 二者等同这时因为如果属性名和属性值完全一样可以简写为一个单词--/body视频标签
标签名video src视频的URL/video src用于指定视频的位置和名称是视频标签的必须属性 bodyvideo src2023-09-24%2016-07-36.mp4 controls width500 height500/video
!-- 想要自动播放就必须要有muted属性 --/bodyHTML基本骨架 HTML的基本骨架是网页模板 html:整个网页 head网页头部存放给浏览器看的代码例如CSS body网页主题存放给用户看的代码例如图片、文字 title:网页标题 综合案例-个人简介
网页制作思路:从上到下、先整体再局部逐步分析制作 分析内容-写代码-保存-刷新浏览器看效果
声明简介及图片完全虚构如有雷同纯属巧合
!doctype html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title个人简介/title
/head
bodyh1张三/h1hrp张三1992年出生中国a href#人工智能/a领域青年专家现任中国a href#人工智能/a产业发展联盟理事、XX大学客座教授。/pimg src./img.png alt张三照片 title张三 width200 height200h2学习经历/h2p2010-2014年就读于XX大学计算机科学与技术专业获学士学位 期间连续四年获学术奖学金并在核心期刊发表多篇人工智能领域论文 。br2014-2017年攻读同校人工智能方向硕士学位研究领域聚焦机器学习与自然语言处理参与多项国家级科研项目/ph2主要成就/h2p技术创新ins主导开发基于AI的医疗诊断系统应用于三甲医院显著提升早期疾病筛查准确率至95%以上/ins。br行业影响在金融领域推动智能风控模型落地协助某银行降低30%信贷风险相关成果获省级科技进步一等奖。br学术贡献发表20余篇SCI论文出版专著《人工智能跨领域实践》被多所高校列为教材。/ph2社会任职/h2p2022年至今strong担任中国人工智能产业发展联盟理事/strong参与制定行业技术标准与伦理规范。br2024年起受聘为XX大学客座教授联合培养硕博研究生并主导校企合作实验室建设。br2025年入选“青年科技领军人才计划”兼任市政府数字化转型顾问团成员推动智慧城市建设。/p/body
/html列表 列表 列表作用布局内容排列整齐的区域 列表分为无序列表、有序列表、定义列表 无序列表布局整齐的不需要规定顺序的区域 标签:ul嵌套liul是无序列表li是列表条目 ul标签里面只能包含li标签li标签里面可以包裹任何内容 ulli第一项/lili第二项/lili第三项/li
/ulhrulli这是第一条新闻/lili这是第二条新闻/lili这是第三条新闻/li
/ul有序列表布局整齐的需要规定顺序的区域 标签:ol嵌套liol是无序列表li是列表条目 ol标签里面只能包含li标签li标签里面可以包裹任何内容 olli第一项/lili第二项/lili第三项/li
/olhrolli这是第一条新闻/lili这是第二条新闻/lili这是第三条新闻/li
/ol定义列表 标签:dl嵌套dt和dddl是定义列表dt是定义列表的标题dd是定义列表的描述/详情 dl里面只能包含dt和dd dt和dd里面能包裹任何内容 表格 网页中的表格于Excel表格类似用来展示数据 标签:table嵌套trtr嵌套td/th 在网页中表格默认没有边框线使用border属性可以为表格添加边框线
table border1trth姓名/thth班级/thth年龄/thth名次/th/trtrtd张三/tdtd2/tdtd18/tdtd4/td/trtrtd李四/tdtd2/tdtd19/tdtd26/td/trtrtd王五/tdtd1/tdtd17/tdtd1/td/trtrtd赵六/tdtd2/tdtd18/tdtd10/td/tr/table表格结构标签:用表格结构标签把内容划分区域让表格结构更加清晰语义更清晰
table border1theadtrth姓名/thth班级/thth年龄/thth名次/th/tr/theadtbodytrtd张三/tdtd2/tdtd18/tdtd4/td/trtrtd李四/tdtd2/tdtd19/tdtd26/td/trtrtd王五/tdtd1/tdtd17/tdtd1/td/tr/tbodytfoottrtd总结/tdtd总结/tdtd总结/tdtd总结/td/tr/tfoot/table合并单元格将多个单元格合并成一个单元格以合并同类信息
合并单元格的步骤 1明确合并的目标 2保留最左最上的单元格添加属性(取值是数字表示需要合并的单元格数量) 跨行合并保留最上单元格添加属性rowspa 跨列合并保留最左单元格添加属性colspan 3删除其他单元格
table border1trth姓名/thth班级/thth年龄/thth名次/th/trtrtd张三/tdtd rowspan22/tdtd18/tdtd4/td/trtrtd李四/tdtd19/tdtd26/td/trtrtd王五/tdtd1/tdtd17/tdtd1/td/trtrtd colspan4总结/td/tr/table表单 表单 表单收集用户信息 使用场景登陆页面、注册页面、搜索区域 标签:form/form
input标签
input标签type属性值不同则功能不同 标签:input type ... !-- 特点输入什么就显示什么--
文本框input typetext
br
!-- 特点不显示输入--
密码框input typepassword
br
单选框input typeradio
br
多选框input typecheckbox
br
上传文件input typefileinput标签占位文本提示信息 标签:input type ... placeholder提示信息 多用于文本框和密码框
文本框input typetext placeholder请输入用户名
br
密码框input typepassword placeholder请输入密码单选框radio input typeradio checked namegender男
input typeradio namegender女上传文件file
默认情况下文件上传表单控件只能上传一个文件添加multiple属性可以实现文件多选功能
上传文件input typefile multiple多选框checkbox
多选框也叫复选框默认选中checked
input typecheckbox checked选项A
input typecheckbox checked选项B
input typecheckbox选项C下拉菜单
标签:select嵌套optionselect是下拉菜单整体option是下拉菜单的每一项
selectoption高一/optionoption selected高二/option!-- 加了selected默认选中 --option高三/optionoption大一/option
/select文本域
作用多行输入文本的表单控件 标签:textarea默认提示文字/textarea
label标签
作用网页中某个标签的说明文本 用label标签绑定文字和表单控件的关系增大表单控件的点击范围 label标签-增大点击范围 写法一label标签只包含内容不包裹表单控件 设置label标签的for属性值和表单控件的id属性值相同
input typeradio idman
label forman男/label写法二使用label标签包裹文字和表单控件不需要属性
labelinput typeradio男/label支持label标签增大点击范围的表单控件文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等 按钮
标签:button type按钮/button !-- form表单区域 --
form用户名:input typetextbr密码:input typepasswordbrbutton typesubmit提交/buttonbutton typereset重置/button/form无语义的布局标签
作用布局网页(划分网页区域摆放内容) div独占一行 span不换行 两个都是双标签
div这是div标签/div!--独占一行--
你好,世界!
span这是span标签/span!--不会换行--字符实体
作用在网页中显示预留字符(显示出特殊符号如、)
!--在网页中敲键盘的空格网页只识别一个--
nbsp;你好nbsp;nbsp;nbsp;nbsp;世界
br
lt;gt;综合案例-写一个注册信息
body
!----------------------h1注册信息/h1!---------表单控件--
form!--个人信息--
h2个人信息/h2label姓名:/label input typetext placeholder请输入姓名brlabel密码:/label input typepassword placeholder请输入密码brlabel确认密码:/label input typepassword placeholder请输入确认密码brbrlabel性别:/labellabelinput typeradio namegender checked男/labellabelinput typeradio namegender女/labelbrbrlabel居住城市:/labelselectoption乐山/optionoption重庆/optionoption selected成都/optionoption资阳/optionoption眉山/option/selectbrbr!--教育经历--
h2教育经历/h2label最高学历/labelselectoption大学/optionoption博士/optionoption selected硕士/optionoption高中/option/selectbrbrlabel学校:/label input typetext placeholder请输入学校brlabel专业:/label input typetext placeholder请输入专业brbrlabel在校时间/labelselectoption2015/optionoption2016/optionoption selected2017/optionoption2018/option/select--selectoption2019/optionoption2020/optionoption selected2021/optionoption2022/option/selectbrbr!--工作经历--
h2工作经历/h2label公司名称/labelinput typetext placeholder请输入公司名称brlabel工作描述/label br textarea/textareabrbr!--协议--input typecheckboxlabel已阅读并同意下协议/labelullia href#ins《用户服务协议》/ins/a/lilia href#ins《隐私政策》/ins/a/li/ulbrbrbrbr!--按钮--button typesubmit免费注册/buttonbutton typereset重新填写/button/form
!----------------------
/body
