首页 > 其他分享 >11.7 html

11.7 html

时间:2024-11-07 17:41:48浏览次数:4  
标签:文件 ctrl 标签 11.7 选择 html div

html

一、基本介绍

1、定义:html是一种超文本标记语言,也是一种标识性语言(不是编程语言)

标记:记号(绰号)

超文本:就是页面内容可以包含图片、链接,音乐,视频等素材。

2、为什么学习html?

(1)测试页面元素,了解页面页面元素(页面是html语言编写的)

(2)进行ui自动化需用到元素定位
3、html有哪些特点?

(1)简易性

(2)可拓展性

(3)平台无关性

(4)通用性
4、什么人员使用html?

(1)前端开发:

javascript +html+css

H5=html5(html第5版本) 互相装换成web页面和app页面

前端开发的职责: 负责页面设计,页面排版(html)

后端开发:负责后台业务逻辑,使用编程语言,前后端需要业务对接(python)

(2)测试

定位元素,实现ui自动化

5、html查看 方式?

(1)第一种方式:

fn+f12 或f12

(2)第二种方式

浏览器中更多工具开发者工具

6、如何查看元素?

f12+fn点击小箭头=在去点击自己要查看的元素

7、切换web和app端模式(h5)

=====================================

二、安装工具hbilder

(1)hbilder 编译器ide工具,是一个能编写html源码工具,也是一个开发工具;

(2)html就是我们被用做www的网址

(3)目前公司用web语言就html (h5)

javascript=js(简写)

(4)安装步骤:

a、百度中下载hbuilder

b、解压:

c.右键快捷桌面或直接打开

e点击图标,启动,点击暂不登录

f.打开界面,表示安装成功

g、先建项目,在建一个html文件,在运行

(1)新建项目,file右键新建项目(快捷键ctrl+n+w)

(2)编辑项目

新建好的项目:在js在新建html文件

(2)新建html文件

在js=右键新建==html文件(快捷方式 :ctrl+n+h)

编辑html文件

(3)html基本格式(通过!+tab键联想出来)

页面基本格式:

================================

三、

html快捷键:

(1)ctrl+n+w 创建项目

(2)ctrl+n+h 创建html文件

(3)ctrl+s 保存)(未保存显示*号)

(4)ctrl+r 运行

(5)ctrl+z 撤回

(6)!+tab键 联想基本格式

(7)ctrl+/ 注释和取消注释

(8)ctrl+鼠标滚轮, 字体方大和缩小

================================

四、认识标签

1、标题标签(h1--h6)

h1是最大的标签

h6是最小的标签

输入方式:

(1)h1+tab键

(2)h2+enter键

2、段落标签(p标签)

3、其他标签

(1)&nbsp 空格
(2)em 标签表示斜体
(3)i 标签表示斜体
(4)br 表示换行
(5)b 标签表示加粗
(6) strong 标签表示加粗
(7)s 标签表示删除线
(8)u 标签 表示下划线
(9)font 颜色
(10)sub下标
(11)sup上标

===================================

图片标签:

(1)引用本地图片

a .通过打开文件所在目录,存放图片

b、通过拖拽到img中图片

c.导入图片img 加上宽度,长度

案例:<img src="../img/山水画001.jpg" alt="" / width="100" height="100">

(2)引用网上图片

a. 网上图片的链接:

打开图片,右键=复制(图片地址)==将复制的地址黏贴到src中

img链接:https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F0a2186762369x2331905615b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656398879&t=4d9915d3b0119bcb081b464d77d2fc0e

b.通过查看图片的元素获取src

通过查看的图片点击元素查看src

===================================

链接标签

(1)定义:从一个网页指向另一个网页的目的地,这个目标可以是一个网页,也可以是相同上的位置,还可以是图片,一个文件,一个应用程序等;

(2)四种类型:

a.新连接覆盖原连接

b、新开一个窗口

c、图片连接

d、死链接

(3)链接用a标签

案例:

新连接覆盖原连接

案例2:

target="_blank"

百度

详解:
target=属性
(1) target=“_blank” 表示将连接的画面内容,在新的浏览器窗口中打开;(打开新窗口)重点
(2)target=“_self” 表示将连接画面内容,显示在目前的窗口中;
(3)target=“_top” 表示将连接画面内容,显示在没有框架的视窗中;
(4)target=“_parent” 表示将连接画面内容,当成文件的上一个画面;
(5)target=“_search” 表示将连接画面内容,搜索区装载的文档

案例3:

案例4:

死链接:

多测师

====================================

列表标签

1、有序列表

ol 表示有序列表 (order lists 简称ol)

修改排序内容:a,A,1

快速生成有序列表

案例:ol2>li3

2、无序列表

ul 表示无序: (unordered lists 简写:ul)

无序类型:

(1)circle 空心圆点

(2)disc 实心圆点 (默认实心点)

(3)square实心方块

快速生无序列表

案例:ul2>li3

========================================

表格: table

(1)认识表中的一些常用单词

border 边距

align 格式 ‘ center’ 对齐

cellspacing 单元格与单元格的距离

cellpadding 单元格与内容的距离

wedth 宽度

height 高度

tr 表示:行

th 表示:表头

td :表示列

(2)输入table +回车

(3)编辑表格

合并行:

rowspan=‘行数’

合并列:

colspan =“行数”

案例:

表格标签
姓名 性别 年龄
张三 18
李四 20
王五

================================================

表单:

表单标签格式:form
action:开始网址

method:get和post等等
表单标签:主要用来收集用户输入信息如:登入、注册、搜索商品等
用户名格式:text (明文)
密码格式:password (密文)
性别:radio 性别格式 性别是单选,单选类型是radio,注意name要加上sex
复选框:checkbox

文本框:textarea
上传文件:file

下拉选择框:select
button:按钮

reset:重置
submit:提交

案例:

==================================================

css

层叠样式

(1)定义:css是一种用来表现html或xml等文件样式的计算机语言。

(2)css 不仅可以静态的修饰网页,还可以配合各种动态对网页元素进行格式化;

(3)层叠样式表有两种方法:

第一种:在head中加上style属性

第二种:通过外链方式

在css中新建一个css文件,在css文件中写内容

在使用link 通过外链方式实现

(1)新建css文件,并且编辑

===========================

(1)id选择器

在id属性值前加#

(2)class选择器

在class属性值前加.

(3) 标签选择器

(4)组合选择器

(5)伪类选择器

(6)字体样式和文本样式

=====================

作业:

1、

===============================================

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

学生登记表
学生登记报名表
用户名:
密码
密码确认
性别
选修科目 html mysql linux python
选择学校
选择文件
            <input type="reset"name=""id=""value="重置" />
            <input type="submit"value="提交" />
           </td>
       </table>
      </frome>
</body>
  作业2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

Document

学生报名登记表

用户名 密码 确认密码 性别 女 选择科目 html pyhton linux mysql 选择学校 选择文件
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

学生登报名记表
用户名
密码
密码确认
性别
选择科目html python linux mysql
选择学校
选择文件
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

学生报名登记表

学生登记报名表

用户名
密码
密码确认
性别
选择科目 html mysql linux python
选择学校
选择文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

表格标签
    </tr>
    <tr>
        <td>用户名</td>
        <td align="center"><input type="text" placeholder="请输入账号"></td>
    </tr>
    <tr>
        <td>密码</td>
        <td align="center"><input type="password" placeholder="请输入密码"></td>
    </tr>
    <tr>
        <td>密码确认</td>
        <td align="center"><input type="password" placeholder="请确认密码"></td>
    </tr>
    <tr>
        <td>性别</td>
        <td>
            <input type="radio" name="sex" id="" value="" />男
            <input type="radio" name="sex" id="" value="" />女
        </td>
    </tr>
    <tr>
        <td>选择科目</td>
        <td>
            <input type="checkbox" name="" id="" value="" />html
            <input type="checkbox" name="" id="" value="" />python
            <input type="checkbox" name="" id="" value="" />linux
            <input type="checkbox" name="" id="" value="" />mysql
        </td>
    </tr>
    <tr>
        <td>选择学校</td>
        <td>
            <select name="">
                <option value="">清华大学</option>
                <option value="">北京大学</option>
                <option value="">复旦大学</option>
                <option value="">上海交大</option>
                <option value="">其它学校</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>选择文件</td>
        <td><input type="file" name="" id="" value="" /></td>
    </tr>
    <tr align="center">
        <td colspan="2">
            <input type="submit" name="" id="" value="提交" />
            <input type="reset" name="" id="" value="重置" />
        </td>
    </tr>
</body>
  
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<! -- llink rel="stylesheet" href="../css/Explore.css">
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 25%;
margin-right: auto;
margin-left: auto;
}
body div {
background-color: red;
}
div {
border: 1px solid black;
}
.grid_container {
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 2fr 1fr;
}
div>div:first-of-type {
grid-column-start: 1;
grid-column-end: 3;
text-align: center;
}
div>div:last-of-type{
grid-column-start: 1;
grid-column-end: 3;
text-align: center;
}
div>div:nth-child(3),
div>div:nth-child(5),
div>div:nth-child(7) {
text-align: center;
}
</style>
<title>Document</title>
</head>
<body>
<form action="https://www.cnblogs.com/Aorphine">
<div class="grid_container">
<div class="table_title">
<h2>学生报名登记表</h2>
</div>
<div>用户名</div>
<div>
<input type="text" placeholder="用户名">
</div>
<div>密码</div>
<div>
<input type="password" placeholder="请输入密码">
</div>
<div>确认密码</div>
<div>
<input type="password" placeholder="请确认密码">
</div>
<div>性别</div>
<div>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</div>
<div>选择科目</div>
<div>
<input type="checkbox" name="subject">html
<input type="checkbox" name="subject">pyhton
<input type="checkbox" name="subject">linux
<input type="checkbox" name="subject">mysql
</div>
<div>选择学校</div>
<div>
<select name="select_school" id="school">
<option value="none" selected disabled hidden>-选择我的学校</option>
<option value="school0">学校一</option>
<option value="school0">学校二</option>
<option value="school0">学校三</option>
</select>
</div>
<div>选择文件</div>
<div>
<input type="file">
</div>
<div class="table_bottom">
<input type="reset">
<input type="submit">
</div>
</div>
</form>
</body>
</html>
学生登记报名表

标签:文件,ctrl,标签,11.7,选择,html,div
From: https://www.cnblogs.com/huhao20001007/p/18533671

相关文章

  • _html
    html一、基本介绍1、定义:html是一种超文本标记语言,也是一种标识性语言(不是编程语言)标记:记号(绰号)超文本:就是页面内容可以包含图片、链接,音乐,视频等素材。2、为什么学习html?(1)测试页面元素,了解页面页面元素(页面是html语言编写的)(2)进行ui自动化需用到元素定位3、html有哪些特点......
  • HTML格式
    html有哪些特点?(1)简易性(2)可拓展性(3)平台无关性(4)通用性html快捷键:(1)ctrl+n+w创建项目(2)ctrl+n+h创建html文件(3)ctrl+s保存)(未保存显示*号)(4)ctrl+r运行(5)ctrl+z撤回(6)!+tab键联想基本格式(7)ctrl+/注释和取消注释(8)ctrl+鼠标滚轮,字体方大和缩小表格:table(1)认识......
  • HTML 转 Word API 接口
    HTML转WordAPI接口支持网页转Word,高效转换为Word,提供永久链接。1.产品功能超高性能转换效率;支持将传递的HTML转换为Word,支持HTML中的CSS格式在Word文档中的呈现;支持传递网站的URL,直接转换成对应的Word格式返回;转换后的Word提供永久存储文件地址;已完......
  • HTML 转 PDF API 接口
    HTML转PDFAPI接口网络工具/文件处理支持网页转PDF高效生成PDF/提供永久链接。1.产品功能超高性能转换效率;支持将传递的HTML转换为PDF,支持转换HTML中的CSS格式;支持传递网站URL,直接转换页面成对应的PDF文件;转换后的PDF提供永久存储文件地址;全接口......
  • 快看!HTML&CSS:你没见过的卡通表情
    它包含了HTML结构、CSS样式和一些内嵌的CSS动画。这个网页设计了一个有趣的动画效果,看起来像是一个卡通风格的“便便”表情,周围还有一些彩色的气泡(可能是代表气体的视觉效果O(∩_∩)O哈哈~)HTML<divclass='toots'><divclass='toot'></div><divclass='toot'><......
  • 摸鱼!HTML&CSS:画个心跳玩玩~
    效果演示这段代码是一个HTML和CSS的组合,它包含了一个SVG图形,该图形被设计成一个心形,并使用了CSS动画来创建一个“心跳”的效果HTML<svgclass="heart"viewBox="-5-527856"version="1.1"id="svg5"xmlns="http://www.w3.org/2000/svg"><filter>......
  • 纯HTML5+CSS3实现一棵自己跳舞的树
    代码没有多少,也没有用到任何图片,就实现了一棵可以自己跳舞的树。文件组成就简简单单的一个html和一个csshtml部分并不是很复杂,就是一些空的div,然后加上html模板也就那么十来行代码最关键的还是css部分,也不是很多,总共一百来行但就是上面这么简简单单的两个文件可以绘画出一......
  • 基于Java+SpringBoot+Vue+HTML5城市垃圾分类管理系统(源码+LW+调试文档+讲解等)/城市
    博主介绍......
  • 基于Java+SpringBoot+Vue+HTML5药店管理系统(源码+LW+调试文档+讲解等)/药店管理软件/
    博主介绍......
  • 基于Java+SpringBoot+Vue+HTML5旅游网站(源码+LW+调试文档+讲解等)/旅游攻略/旅游指南
    博主介绍......