网咯鸟深圳网站建设,衡水企业网站建设费用,easy wordpress timelines,网站建设前 需要准备的我的主页#xff1a;2的n次方_
HTML 是一种超文本标记语言#xff0c;不仅有文本#xff0c;还能包含图片#xff0c;音频等
1. HTML 的文件基本结构 html 标签是整个 html 文件的最顶层标签#xff0c;head 标签中写页面的属性#xff0c;body 标签是页面中显示的… 我的主页2的n次方_
HTML 是一种超文本标记语言不仅有文本还能包含图片音频等
1. HTML 的文件基本结构 html 标签是整个 html 文件的最顶层标签head 标签中写页面的属性body 标签是页面中显示的内容title 标签是页面的标题当把上面的代码在浏览器中运行一下可以看到 在 VS code 中输入一个 就可以直接生成一个整体的框架 2. HTML 的常见标签
2.1. 标题标签
h1 - h6 分别表示 1 级标题到 6 级标题
bodyh1我是一级标题/h1h2我是二级标题/h2h3我是三级标题/h3
/body 2.2. 段落标签
在 HTML 中段落换行符空格都不会生效如果需要分成段落就需要使用专门的段落标签
bodyh1我是一级标题/h1p我是一个段落/p
/body p 标签描述的段落没有缩进会根据浏览器宽度来进行自动排版
bodyp我是一个段落我换行了我有 空格/p
/body
html 内容首尾处的换行空格均无效在 html 中文字之间加入多个空格只相当于一个空格换行也是不会直接换行相当于一个空格 2.3. 换行标签
如果想实现换行的话可以通过 br/ 标签来实现br 是一个单标签不像上面的几个标签一样需要首尾配合使用
body你好br /你好br /
/body p 标签的段落换行和 br 标签的换行中间的行距也有点不一样
2.4. 图片标签
img 标签表示图片必须带有 src 属性表示图片的路径同级目录下可以直接写文件名可以写绝对路径也可以写相对路径还可以写网络路径一般建议写 / 不写 \
./ 表示当前目录 ../ 表示上一级目录
bodyimg srcE:/截图/图片/壁纸.png altimg src壁纸.png alt
/body
还可以设置图片的宽度和高度
img src壁纸.png height200px
一般宽高指定一个就可以了另一个会等比例缩放 2.5. 超链接标签
a 标签就表示超链接 href 表示要跳转的位置 a hrefhttps://www.baidu.com/百度/a 除了可以跳转外部的链接内部的链接也可以跳转写相对路径即可
a hrefTest.html target_blank跳转/a
target 表示跳转的方式_blank 表示在新的页面中打开默认是在本页面打开的
还可以使用一个空连接用 # 来进行占位如果此时还不确定要跳转的路径是什么就可以使用 # 进行占位
a href# target_blank占位链接/a 3. 表格和表单
3.1. 表格标签
table表示整个表格
tr表示表格的一行
td表示一个单元格
也就是 table 包含 trtr 包含 td vs code 中提供了快捷输入 tabletrtda/tdtdb/tdtdc/td/trtrtdd/tdtde/tdtdf/td/trtrtdg/tdtdh/tdtdi/td/tr/table
这样就可以构建一个 3 * 3 的表格了 还可以加上边框在 table 里加上 border 并设置大小
table border1px 再加上 cellspacing 来设置内边框和外边框的间距
table border1px cellspacing0 还可以设置边框的宽度和文字距离边框的距离 table border1px cellspacing0 width300px cellpadding20 单元格之间还可以合并下面是按照行合并指定合并两列那么就多了一个字母 c 为了保持表格形状把 c 列删了就行
td colspan2a/td 同理还可以合并行
td rowspan2d/td
然后发现多了 i 的单元格把 i 删了就行了 还可以再加入 align 设置对齐方式这里设置为居中 table border1px cellspacing0 width300px cellpadding20 aligncenter 表格就显示到浏览器的中间位置了
表格中的内容也可以设置居中 td colspan2 aligncentera/td 3.2. 表单标签
表单是让用户输入信息的一种途径这些输入框就是一个表单表单分成表单域和表单控件两个部分 3.2.1. input 标签
可以输入各种组件如单行文本框密码框按钮单选框复选框等,type 就可以指定这些控件类型 input typedate
date 就是一个简单的日历 文本框
文本框 input typetextbr/ 密码框密码框的输入是看不见的 文件
文件 input typefilebr/ 单选按钮
单选按钮 input typeradioinput typeradioinput typeradiobr / 按道理说单选按钮是只能选一个的但是上面创建的三个按钮都可以选择是因为上面的三个按钮没有关联需要具有相同的 name 属性才能实现多选一的效果
单选按钮 input typeradio namegender男input typeradio namegender女br / 还可以加上一个 checked 来默认勾选一个选项
input typeradio namegender checkedchecked女br / 复选框可以勾选多个
复选框 input typecheckbox篮球 input typecheckbox 足球br / 普通按钮
普通按钮input typebutton value按钮 提交按钮代码中没有写 value 按钮上也是有提交字样的
提交按钮input typesubmit 下拉框
下拉框selectoption北京/optionoption上海/optionoption广州/optionoption深圳/option/select 文本域
文本域textarea rows5 cols20/textarea 可以点右下角拖动
3.2.2. 表单域
表单域就是包含表单元素的区域也就是可以包含上面控件的区域用 form 标签表示表单控件中的内容最终都会通过表单域提交
form action methodget/form
action 中填的就是最终要提交的路径method 表示提交数据的方式
4. 无语义标签
div 和 span
div 是独占一行的span 只占一块
divspan你好/spanspan你好/spanspan你好/span/divdivspan你好/spanspan你好/spanspan你好/span/div
