小型网站建设实训教程,新年电子贺卡免费制作软件app,全网营销一站式推广,定制型网站设计目录
编辑一、使用 vscode
二、研究代码的特点
三、HTML 常见标签
注释标签
标题标签
段落标签
换行标签
格式化标签
图片标签
超链接标签
表格标签
列表标签
表单标签#xff1a;
form 标签
input标签#xff1a;
select textarea标签#xff1a;
无语…
目录
编辑一、使用 vscode
二、研究代码的特点
三、HTML 常见标签
注释标签
标题标签
段落标签
换行标签
格式化标签
图片标签
超链接标签
表格标签
列表标签
表单标签
form 标签
input标签
select textarea标签
无语义标签
案例一展示简历信息 一、使用 vscode vscode 没有 “项目” 这个概念都是使用 目录 来组织的
我们就可以选择一个当前想要代码的目录打开这个目录打开目录就相当于以这个目录作为项目目录
1、打开目录
2、创建代码文件
3、编写代码 此时代码高亮/ 提示 / 自动缩进 就都有了
写完代码之后记得保存ctrl s 如果存在这个小圆点说明是为保存的就需要进行保存
4、允许代码
仍然是使用浏览器运行 然后在弹出的文件资源管理器中双击 html 或者拖拽到浏览器中运行此时代码就能跑起来了 二、研究代码的特点
1、html 代码是通过标签来组织的
形如 html /html 用尖括号组织的成对出现的这个东西就是 “标签” 也可以叫做元素
2、一个标签通常是成对出现的
html 开始标签/html 结束标签
这俩之间的是标签的内容
3、标签是可以嵌套的
一个标签的内容可以是其他一个或者多个标签此时这些标签构成了一个树形结构 4、在开始标签中给标签赋予属性
属性可以相当于是键值对可以有一个或者多个
HTML 就基本的语法结构就是这几个简单的规则下一步要了解的是当前 HTML 中都支持哪些标签这些标签又是干什么的每个标签有哪些基本属性...... 三、HTML 常见标签
HTML 不支持自定义标签
html 是一个 html 文件最顶层的标签相当于树根节点
head 存放了这个页面的一些属性
body 存放了这个页面包含了哪些内容 tab 可以快速的生成一个基本的页面我们只需要编辑 body 的内容即可这个功能叫做 emmet 快捷键 注释标签
代码的注释html 的注释和一般的语言注释差别很大 注释的内容不会再在页面中显示
但是如果我们右键查看网络源代码是可以看到注释的
vscode 里可以使用 ctrl / 快速注释
标题标签
h1 最大h6 最小 每个标题标签都是独占一行的这个独占一行和代码的编写无关
在 html 里面标签是否换行和代码的编写无关而是和标签自身有关有的标签独占一行有的标签不独占
在 html 源代码中写的 换行 会被忽略写的空格多个连续空格会被视作一个有的时候忽略有的时候视为一格
段落标签 每个段落之间不光是换黄同时还有一个明显的段落间距 换行标签
br 标签表示换行
br 是一个单标签不是成双成对出现的
格式化标签 这些标签都是不独占一行的
图片标签
网页上是可以显示图片的报纸上也是可以有图片的
img 有个核心属性src必填
src 描述了该图片的路径路径可以是本地的绝对路径也可以是相对路径和网络路径
使用相对路径的时候一定要明确工作目录是哪一个html 的工作目录就是 html 当前的所在的目录
img 别的属性
alt 属性在图片挂了的时候就会显示 alt 对应的文本
title 属性鼠标悬停在图片上会给出一个提示
width / height 描述图的尺寸
宽度和高度可以同时设置也可以只设置一个如果只设置一个另一个就会等比例缩放
单位是 px 像素这是在前端开发中最常见的单位
超链接标签
链接 link 快捷方式
超链接跳转到的页面可以是当前网站之外的 还有一个属性target
一般都是写作 target _blank就可以打开一个新的标签页而不会替换原有页面
这里的域名是可以替换成 ip 地址的
表格标签
table 表示整个表
tr 表示一行
td 表示一个单元格
th 表示表头中的一个单元格 为了让这个表格看上去更像表格我们可以在 table 后面添加属性
如果想要让文字居中就得使用到 CSS 了 这个操作就是让所有 td 标签中的文字都居中
列表标签
有序列表 ol ordered list
无序列表 ul unordered list
列表项 li list item 表单标签
form 标签
使用 form 进行前后端交替把页面上用户进行的 操作 / 输入 提交到服务器上
在后面学习http 的时候会具体写 input标签
有很多形态能够表现成各种用户用来输入的组件 单行文本框 也是单行文本框但是是用来输入密码的 单选按钮
对于单选框需要加一个 name 属性name 属性相同的单选框值之间是互斥的也就是只能选择一个也可以加一个 checked 属性加了 checked 的是初始被选择的 复选框可以反复选择也可以使用 checked 属性来设置默认选中的 按钮对于按钮点击之后要干什么需要通过 js 来配合
还有一种是提交按钮需要搭配 form 使用外表和 buttoon 是差不多的会触发 form 和服务器的交互 文件选择框 select
下拉菜单 textarea标签 多行编辑框 上述标签也可以称为是 “控件” 是构成一个图形化界面的基本要素 无语义标签
前面的标签都是由特定含义的无语义标签没有特定含义意思是可以用在各种场景
div默认是独占一行的 [块级元素]
span 是不独占一行的 [行内元素]
如果一个页面中全用 div 也不是不行但是一般不建议这么做表示一个内容还是优先考虑语义更贴切的标签 案例一展示简历信息
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title个人简历/title
/head
bodyh1馒头警告的简历/h1h2基本信息/h2img srcC:\Users\Huang\Desktop\照片\馒头.jpg alt height200pxdiv求职意向软件开发工程师/divdiv联系方式110/divdiv邮箱123456qq.com/divdiva hrefhttps://blog.csdn.net/weixin_73616913?spm1000.2115.3001.5343 馒头警告的博客/a/divh2教育背景/h2olli1990 - 1996 小葵花妈妈幼儿园/lili1997 - 2000 小葵花中学/lili2001 - 2020 小葵花高中/lili2021 - 2023 小葵花大学/li/olh2专业技能/h2ulli熟练掌握 Java 基本语法/lili熟悉常用的青年大学习/lili熟悉掌握学习强国技能/li/ulh2我的项目/h2ollih3项目一/h3p开发时间xxxx年 x 日/pdiv功能介绍/divulli功能一xxxxxxx/lili功能二xxxxxxx/li/ul/lilih3项目二/h3p开发时间xxxx年 x 日/pdiv功能介绍/divulli功能一xxxxxxx/lili功能二xxxxxxx/li/ul/li/olh2个人评价/h2这是一段个人评价.....
/body
/html
