品牌型网站建设特点,可以制作图片的手机软件,wordpress附件数据库,专门做网页的网站html
一、基本介绍
1、定义#xff1a;html是一种超文本标记语言#xff0c;也是一种标识性语言#xff08;不是编程语言#xff09;
标记#xff1a;记号#xff08;绰号#xff09;
超文本#xff1a;就是页面内容可以包含图片、链接#xff0c;音乐#xff0c…html
一、基本介绍
1、定义html是一种超文本标记语言也是一种标识性语言不是编程语言
标记记号绰号
超文本就是页面内容可以包含图片、链接音乐视频等素材。 2、为什么学习html
1测试页面元素了解页面页面元素页面是html语言编写的
2进行ui自动化需用到元素定位 3、html有哪些特点
1简易性
2可拓展性
3平台无关性
4通用性 4、什么人员使用html
1前端开发
javascript htmlcss
H5html5html第5版本 互相装换成web页面和app页面
前端开发的职责 负责页面设计页面排版(html)
后端开发:负责后台业务逻辑使用编程语言前后端需要业务对接(python)
2测试
定位元素实现ui自动化 5、html查看 方式
1第一种方式
fnf12 或f12
2第二种方式
浏览器中更多工具开发者工具 6、如何查看元素
f12fn点击小箭头在去点击自己要查看的元素 7、切换web和app端模式h5 二、安装工具hbilder
1hbilder 编译器ide工具是一个能编写html源码工具也是一个开发工具
2html就是我们被用做www的网址
3目前公司用web语言就html h5
javascriptjs简写
4安装步骤
a、百度中下载hbuilder b、解压 c.右键快捷桌面或直接打开 e点击图标启动点击暂不登录 f.打开界面表示安装成功 g、先建项目在建一个html文件在运行
1新建项目file右键新建项目快捷键ctrlnw 2编辑项目 新建好的项目在js在新建html文件 2新建html文件
在js右键新建html文件快捷方式 ctrlnh 编辑html文件 3html基本格式通过tab键联想出来 页面基本格式 三、
html快捷键
1ctrlnw 创建项目
2ctrlnh 创建html文件
3ctrls 保存未保存显示*号
4ctrlr 运行
5ctrlz 撤回
6tab键 联想基本格式
7ctrl/ 注释和取消注释
8ctrl鼠标滚轮 字体方大和缩小 四、认识标签
1、标题标签h1--h6
h1是最大的标签
h6是最小的标签
输入方式
1h1tab键
2h2enter键 2、段落标签p标签 3、其他标签 1nbsp 空格 2em 标签表示斜体 3i 标签表示斜体 4br 表示换行 5b 标签表示加粗 6 strong 标签表示加粗 7s 标签表示删除线 8u 标签 表示下划线 9font 颜色 10sub下标 11sup上标 4、表单标签 图片标签
1引用本地图片
a .通过打开文件所在目录存放图片 b、通过拖拽到img中图片 c.导入图片img 加上宽度长度
案例img src../img/山水画001.jpg alt / width100 height100 2引用网上图片
a. 网上图片的链接
打开图片右键复制图片地址将复制的地址黏贴到src中
img链接https://gimg2.baidu.com/image_search/srchttp%3A%2F%2Fi.qqkou.com%2Fi%2F0a2186762369x2331905615b26.jpgreferhttp%3A%2F%2Fi.qqkou.comapp2002sizef9999,10000qa80n0g0nfmtauto?sec1656398879t4d9915d3b0119bcb081b464d77d2fc0e b.通过查看图片的元素获取src
通过查看的图片点击元素查看src 链接标签
1定义从一个网页指向另一个网页的目的地这个目标可以是一个网页也可以是相同上的位置还可以是图片一个文件一个应用程序等
2四种类型
a.新连接覆盖原连接
b、新开一个窗口
c、图片连接
d、死链接
3链接用a标签
案例
!--a hrefhttps://www.baidu.com/百度/a--
新连接覆盖原连接
案例2
target_blank
a hrefhttps://www.baidu.com/ target_blank百度/a
详解 target属性 1 target“_blank” 表示将连接的画面内容在新的浏览器窗口中打开打开新窗口重点 2target“_self” 表示将连接画面内容显示在目前的窗口中 3target“_top” 表示将连接画面内容显示在没有框架的视窗中 4target“_parent” 表示将连接画面内容当成文件的上一个画面 5target“_search” 表示将连接画面内容搜索区装载的文档
案例3
a hrefhttps://www.duoceshi.cn/rjcs/img src../img/多测师图标.png//a
案例4
死链接
a href#多测师/a 列表标签
1、有序列表
ol 表示有序列表 order lists 简称ol
修改排序内容aA,1 快速生成有序列表
案例ol*2li*3 2、无序列表
ul 表示无序 unordered lists 简写ul
无序类型:
(1)circle 空心圆点
2disc 实心圆点 默认实心点
3square实心方块 快速生无序列表
案例ul*2li*3 表格 table
1认识表中的一些常用单词
border 边距
align 格式 ‘ tenter’ 对齐
cellspacing 单元格与单元格的距离
cellpadding 单元格与内容的距离
wedth 宽度
height 高度
tr 表示行
th 表示表头
td 表示列
2输入table 回车 3编辑表格 合并行
rowspan‘行数’ 合并列
colspan “行数” 案例
!DOCTYPE html html head meta charsetUTF-8 title表格标签/title /head body table border10 aligncenter alcellspacing2 cellpadding2 width200 height200 tr th姓名/th th性别/th th年龄/th /tr tr td张三/td td男/td td18/td /tr tr td李四/td td 男/td td20/td /tr tr td王五/td td colspan2男/td /tr /table /body /html 表单
表单标签格式form action开始网址 methodget和post等等 表单标签主要用来收集用户输入信息如登入、注册、搜索商品等 用户名格式text 明文 密码格式password 密文 性别radio 性别格式 性别是单选单选类型是radio注意name要加上sex 复选框checkbox
文本框textarea 上传文件file
下拉选择框select button按钮 reset重置 submit提交 案例 css
层叠样式
1定义css是一种用来表现html或xml等文件样式的计算机语言。
2css 不仅可以静态的修饰网页还可以配合各种动态对网页元素进行格式化
3层叠样式表有两种方法
第一种在head中加上style属性 第二种通过外链方式
在css中新建一个css文件在css文件中写内容
在使用link 通过外链方式实现
1新建css文件并且编辑 1id选择器
在id属性值前加# 2class选择器
在class属性值前加. (3) 标签选择器 4组合选择器 5伪类选择器 6字体样式和文本样式 作业
1、 分类: 教学笔记 / 教学笔记二
!DOCTYPE html html head meta charsetutf-8 title/title /head body table border cellspacing cellpadding bgcolorred tr th/th th学生登记报名表/th /tr tr td用户名/td tdinput typetext name id //td /tr tr td密码/td tdinput typepassword name id //td /tr tr td密码确认/td tdinput typepassword name id //td /tr tr td性别/td td input typeradio namesex id value /男 input typeradio namesex id value /女 /td /tr tr td选择科目/td td input typecheckbox name id value /html input typecheckbox name id value /python input typecheckbox name id value /linux input typecheckbox name id value /mysql /td /tr tr td选择学校/td td br / select name id option value浙江大学/option option value清华大学/option option value北京大学/option option value山东大学/option /select /td /tr tr td选择文件/td tdinput typefile name id valueaa //td /tr tr td/td td input typereset name id value /重置 input typesubmit name id value /提交 /td /tr /table /body /html
