织梦网站上传步骤,网站前端设计要做什么的,网站建设灯,电子产品开发流程图欢迎大家来到我的博客~欢迎大家对我的博客提出指导#xff0c;有错误的地方会改进的哦~点击这里了解更多内容 目录 一、前言二、HTML基础2.1 什么是HTML?2.2 认识HTML标签2.2.1 HTML标签当中的基本结构2.2.2 标签层次结构 2.3 HTML常见标签2.3.1 标题标签2.3.2 段落标签2.3.3… 欢迎大家来到我的博客~欢迎大家对我的博客提出指导有错误的地方会改进的哦·~点击这里了解更多内容 目录 一、前言二、HTML基础2.1 什么是HTML?2.2 认识HTML标签2.2.1 HTML标签当中的基本结构2.2.2 标签层次结构 2.3 HTML常见标签2.3.1 标题标签2.3.2 段落标签2.3.3 换行标签2.3.4 图片标签2.3.5 超链接2.3.6 表格标签2.3.7 表单标签2.3.8 select标签2.3.9 无语义标签 2.4 综合练习-实现一个用户注册的网页 一、前言 这篇博客的目的认识 HTML 的基本结构, 学习常用的 HTML 标签。 这里说的所用的文本编辑器是idea。 二、HTML基础
2.1 什么是HTML? HTML(Hyper Text Markup Language), 超文本标记语言。 超文本: 比文本要强大. 通过链接和交互方式来组织和呈现信息的⽂本形式. 不仅仅有文本 还可能包含图片, ⾳频, 或者自已经审阅过它的学者所加的评注、补充或脚注等等. 标记语言: 由标签构成的语言。 HTML的标签都是提前定义好的, 使用不同的标签, 表示不同的内容. 类似飞书文档, Word文档。 标签如果选中文本, 点击标题1, 就会使用标题1的样式来显示文本, 上述标题1就是⼀个标签“。 如以下代码建立一个demo1.html文件
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd
html
headtitle我的第一个HTML文件/title
/head
body
!--h1我是一级标题/h1--
!--h2我是二级标题/h2--
!--h3我是三级标题/h3--
!--h4我是四级标题/h4--
body用浏览器打开的效果
上面代码中的h1、h2、h3、h4说的就是标签学习HTML最主要的就是学习标签。 2.2 认识HTML标签
2.2.1 HTML标签当中的基本结构
创建一个叫test1.html的文件,然后输入下面这些内容
html
headtitle我的第一个HTML文件/title
/head
bodyHello HTML !
body
html• html 标签是整个 html 文件的根标签(最顶层标签) • head 标签中写页面的属性. • body 标签中写的是页面上显示的内容。 • title 标签中写的是页面的标题。 效果如下 2.2.2 标签层次结构
• 父子关系 • 兄弟关系 上面代码其中: • head 和 body 是 html 的⼦标签(html 就是 head 和 body 的父标签)。 • title 是 head 的子标签. head 是 title 的父标签. • head 和 body 之间是兄第标签。
**注意**F12 或者右键审查元素, 开启开发者⼯具, 切换到 Elements元素 标签, 就可以看到页面结构细节。 标签之间的结构关系, 构成了⼀个 DOM树 DOM 是 Document Object Mode (⽂档对象模型) 的缩写。 2.3 HTML常见标签
2.3.1 标题标签 有6个h1-h6)数字越大标签字体越小。 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd
html
headtitle我的第一个HTML文件/title
/head
body
h1我是一级标题/h1
h2我是二级标题/h2
h3我是三级标题/h3
h4我是四级标题/h4
h5我是五级标题/h5
h6我是六级标题/h6
body
html2.3.2 段落标签 p表示一个段落 !--nbsp;代表一个空格--
pnbsp;nbsp;nbsp;nbsp;这是一个段落(首行缩进四个空格)
/p
p这是 一个段落单空格
/p上面两个标签的效果如下 注意 • p 标签描述的段落, 前面没有缩进. • 主动根据浏览器宽度来决定排版. • html 内容⾸尾处的换行, 空格均无效。 • 在 html 中文字之间输入的多个空格只相当于⼀个空格。 • html 中直接输入换行不会真的换行, 而是相当于⼀个空格。 2.3.3 换行标签 想要完成换行的话, 也可以通过br标签来实现.br 是 break 的缩写. 表示换行。 在上面的段落标签当中加一个br标签看看会怎样呢
!--nbsp;代表一个空格--
pnbsp;nbsp;nbsp;nbsp;这是一个段落(首行缩进四个空格)
/p
p这是br一个段落单空格
/p
body
html用浏览器打开看看效果
可以看到换行成功了。 2.3.4 图片标签
img srcrose.jpg alt borderimg 标签必须带有 src 属性. 表示图片的路径。 img 标签的其他属性 • width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就可以, 另外⼀个会等比例缩放.否则就会图片失衡。 • border: 边框, 参数是宽 我们先随便去网上找一张图片如下 然后输入代码
br
!--width和height用来设置图片像素的宽度和高度 src指的是图片的路径位置 alt是一个备注--
img srchttps://pica.zhimg.com/50/v2-636b67eef271b4eb6467e25439dd719c_720w.jpg?source1940ef5calt这是一张图片 width60pxheight60
br效果
可以看到这个表情出现了。 这个alt相当于一个注释,我们把这个路径去掉一部分然后再打开浏览器然后就会发现这个alt在这块的作用啦。
!--width和height用来设置图片像素的宽度和高度 src指的是图片的路径位置 alt是一个备注--
img srchttps://pica.zhimg.com/50/v2-636b67eef271b4eb6467e25439dd719c_720w.alt这是一张图片 width60pxheight60可以看到那个图片不见了然后多了一行字,这个就是这个alt的作用了。 2.3.5 超链接 a hreftarget/a• href: 必须具备, 表示点击后会跳转到哪个页面。 • target: 打开方式 默认是 _self. 如果是 _blank 则用新的标签页打开。
!--超链接--
!--外部链接 链接其他的网址--
a hrefhttps://blog.csdn.net/2302_81090306?typeblogtarget_blank我的博客主页/abr
!--再创建一个demo1.html文件--
!--内部链接--
a hrefdemo1.html点我跳转到demo1链接/abr
!--空链接--
a href#target_blank空链接/abr效果如下 2.3.6 表格标签
!--表格标签--
table border1 aligncenter width300height300 cellspacing0trtdqqq/tdtdwww/td/trtrtdeee/tdtdfff/td/trtrtdggg/tdtdhhh/td/tr
/table• align 是表格相对于周围元素的对齐方式. align“center” (不是内部元素的对齐方式) • border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框。 • cellpadding: 内容距离边框的距离, 默认 1 像素。 • cellspacing: 单元格之间的距离. 默认为 2 像素。 • width / height: 设置尺寸。 合并单元格
!--表格标签--
table border1 aligncenter width300height300 cellspacing0tr
!-- 合并单元格 www--td colspan2qqq/td
!-- tdwww/td--/trtrtd eee/td
!-- 合并单元格hhh--td rowspan2fff/td/trtrtdggg/td
!-- tdhhh/td--/tr
/table效果 2.3.7 表单标签
表单是让用户输⼊信息的重要途径. 分成两个部分: • 表单域: 包含表单元素的区域. 重点是 form 标签.
!--from 标签 跟submit一起用--
!--get-向服务端获取资源--
!--post-向服务端发送信息--
form actiontest1.html methodget• 表单控件: 输⼊框, 提交按钮等. 重点是 input 标签. • type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等. • name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀. • value: input 中的默认值. • checked: 默认被选中 介绍几种类型 1.文本框
input typetext举个例子 用户名:input typetextnameusernamesize11br效果 2.密码框
input typepassword举个例子
nbsp;密码:input typepasswordnamepasswordsize11br效果 3.单选框
!--单选按钮--nbsp;性别:input typeradio namegender idgender1value1 label forgender1男/labelinput typeradio namegender idgender2value2 label forgender2女/labelinput typeradio namegender idgender3value0 label forgender3保密/labelbr效果 4.复选框 !--多选按钮--nbsp;兴趣:input typecheckbox namehobby idfun1value1 label forfun1篮球/labelinput typecheckbox namehobby idfun2value2label forfun2足球/labelinput typecheckbox namehobby idfun3value3label forfun3乒乓球/labelinput typecheckbox namehobby idfun4value4label forfun4羽毛球/labelbr效果 5.按钮的实现 !--实现按钮--button 1.这是一个button按钮/buttonbrinput typebutton value2.这是一个input:button按钮brinput typesubmit value3.这是一个submit按钮br效果 2.3.8 select标签
1.文本域
个人描述:textarea rows10 cols5/textareabr效果 2.下拉菜单
!-- 下拉菜单--
!-- 默认选择selected--专业selectoption value1 selected数据科学与大数据技术/optionoption value2计算机科学与技术/optionoption value3数字媒体与技术/optionoption value4人工智能/option/selectbr效果 2.3.9 无语义标签
div 标签, division 的缩写, 含义是分割 span 标签, 含义是跨度就是两个盒子. 用于网页布局
divspanspan1/spanspanspan2/span
/div
divspanspan3/spanspanspan4/span
/div
divspanspan5/spanspanspan6/span
/div效果 2.4 综合练习-实现一个用户注册的网页
要求实现效果 • 使用表格进行整体布局 • 使用各种 input 标签实现页面中的输入控件 代码
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd
html
headtitle用户注册/titlestylediv{color:red;font-size300px;}/style
/head
body
h1用户注册/h1
tabletrtd用户名/tdtdinput typetext nameUsername size11 placeholder请输入用户名/td/tr brtrtd手机号/tdtdinput typetext nameNumber size11 placeholder请输入手机号/td/tr brtrtd密码/tdtdinput typepassword namePassword size11 placeholder请输入密码/td/tr
/table
divbutton注册/button nbsp;span已有账号/spana href#登录/a
/div
/body
/html效果 欧耶我学会啦
