页面的组成-列表/表格/表单/视频音频

发布时间：2022-08-18 18:07

ctrl + shift + p可以在sublime里面安装工具

回顾

CSS属性

边框属性

border:
border-style
border-color
border-width

border-left:
border-right
border-bottom
border-top

border-style-left
border-style-right
border-style-top
border-style-bottom

border-*-left/top/right/bottom

内边距

pading / padding-left/right/top/bottom

背景

background: color image repeate postion
background-color
background-image
background-repeat
background-position
background-attachment

CSS sprites 精灵图

background-color:red;
background:url()

background:
background-color:

尺寸

width/max-width/min-width
height...

HTML标签

超链接和锚点

图片和图片映射

页面中的组成部分

1 列表

1.1 列表标签

有序列表

ol:ordered 默认列表前面是数字，可以设置。

无序列表

ul：Unordered List 默认列表前面是点，可以设置

定义列表

dl：definition list

dl —— define list——定义列表
dt —— define list title —— 用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。注意：其中不能包含 hx 元素。
dd —— define list define —— 用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解释。

1.2 列表相关的CSS属性

适用于

list-style-type: disc/circle/square.../none 列表项前面的符号 none常用（去掉前面图标）
list-style-position: outside/inside  加个边框就能看到明显的效果inside前面的点在边框里。
list-style-image: url()  把符号变成图片 最好是小的图片，可以显示完整。
list-style: 复合属性

ul li {
/*border: 1px solid #ccc;*/
}

ul li:first-child{
list-style:circle inside;
}

选择属于其父元素的首个子元素的每个

元素，并为其设置样式

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>列表title>
 6     <style>
 7         ul {
 8             /*列表项 符号*/
 9             /*list-style-type: circle;
10             list-style-type: square;
11             list-style-type: lower-roman;
12             list-style-type: lower-roman;
13             list-style-type: none;*/
14         
15             /*符号的位置*/
16             /*list-style-position: outside;
17             list-style-position: inside;*/
18 
19             /*把符号变为图片*/
20             list-style-image: url('../../dist/images_two/bullet.gif');
21 
22 
23             /*复合属性*/
24             list-style: circle inside;
25             list-style: none;
26         }
27 
28         ul li {
29             /*border: 1px solid #ccc;*/
30         }
31 
32         ul li:first-child{
33             list-style:circle inside;
34         }
35 
36         ol {
37             list-style: none;
38         }
39     style>
40 head>
41 <body>
42     <h1>同志加油h1>
43     <hr>
44     
45     <h2>无序列表 -- 同志列表h2>
46     <ul>
47         <li>曹操li>
48         <li>诸葛亮li>
49         <li>刘备li>
50         <li>贾宝玉li>
51         <li>西门庆li>
52     ul>
53 
54     
55     <hr>
56     <h2>有序列表 -- 同志人气排名h2>
57     <ol type="I" reversed>
58         <li>金三胖li>
59         <li>金四胖li>
60         <li>金五胖li>
61         <li>金七胖li>
62         <li>金正日li>
63     ol>
64 
65     <hr>
66 
67     <h2>定义列表 -- 前端需要学习的指示h2>
68     <dl>
69         <dt>HTMLdt>
70         <dd>超文本标记语言dd>
71         <dt>CSSdt>
72         <dd>层叠样式表dd>
73         <dt>JavaScriptdt>
74         <dd>浏览器端脚本语言dd>
75     dl>
76 body>
77 html>

列表css属性

2 表格

2.1 HTML标签



   标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

  
  标题
  行 table row
  单元格
  表头单元格 td和th一个在thead  一个在tbody

2.2 CSS属性

table-layout: auto / fixed   列宽固定(相等)
border-collapse: separate/ collapse 合并单元格边框
border-spacing: 长度;  单元格和单元格之间的间隙  单元格不能合并
caption-side: top/bottom  标题的位置
empty-cells:hide/show   空的单元格显示/隐藏 单元格不能合并

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格title>
 6     <style>
 7         table {
 8             width: 600px;
 9             /*height: 600px;*/
10             border: 1px solid #999;
11             
12             /*表格专用css属性*/
13             table-layout: fixed; /*固定每一列的宽度  等宽*/
14             /*border-collapse: collapse; 合并单元格边框*/
15             
16             /*border-collapse: separate;*/
17             border-spacing:5px; /*单元格和单元格的空隙 前提是单元格边框不能合并*/
18             
19             caption-side: top;     /*表示标题在上面*/
20         /*    caption-side: bottom;    */
21             
22 
23             empty-cells: show;  /*显示空的单元格*/
24             empty-cells: hide;  /*隐藏空的单元格 生效的前提，不能合并单元格边框*/
25 
26         }
27         td,th {
28             padding: 5px;
29             border: 1px solid #999;
30         }
31     style>
32 head>
33 <body>
34     <h1>同志交友h1>
35     <hr>
36 
37     
38     <table class="first-table">
39         <caption>同志信息统计caption>
40         
41         <thead>
42             
43             <tr>
44                 <th>序号th>
45                 <th>姓名th>
46                 <th>年龄th>
47                 <th>身高th>
48                 <th>体重th>
49                 <th style="width:200px">饭量th>
50             tr>
51         thead>
52         <tbody>
53             
54             <tr>
55                 <td>1td>
56                 <td>曹操td>
57                 <td>16td>
58                 <td>165td>
59                 <td>80td>
60                 <td>一头牛td>
61             tr>
62 
63             <tr>
64                 <td>2td>
65                 <td>td>
66                 <td>15td>
67                 <td>165td>
68                 <td>80td>
69                 <td>一头羊td>
70             tr>
71 
72             <tr>
73                 <td>3td>
74                 <td>曹汝霖td>
75                 <td>16td>
76                 <td>165td>
77                 <td>80td>
78                 <td>一头猪td>
79             tr>
80 
81             <tr>
82                 <td>4td>
83                 <td>曹冲td>
84                 <td>12td>
85                 <td>165td>
86                 <td>80td>
87                 <td>一头大象和一头犀牛以及一头河马td>
88             tr>
89         tbody>
90         <tfoot>
91             <tr>
92                 <td colspan="6">统计：共计4人td>
93             tr>
94         tfoot>
95     table>
96 body>
97 html>

html标签加css属性

2.3 合并单元格

td或者th的属性：
 colspan  跨列
 rowspan  跨行

  1 DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>表格title>
  6     <style>
  7         table {
  8             width: 600px;
  9             table-layout: fixed;
 10             border-collapse: collapse;
 11         }
 12         td,th {
 13             border: 1px solid #999;
 14             padding: 5px;
 15             text-align: center;
 16         }
 17         table tr {
 18             height: 40px;
 19         }
 20     style>
 21 head>
 22 <body>
 23     <h1>同志交友h1>
 24     <hr>
 25 
 26     <table>
 27         <tr>
 28             <th>序号th>
 29             <th>姓名th>
 30             <th>年龄th>
 31             <th>饭量th>
 32         tr>
 33 
 34         <tr>
 35             <td>1td>
 36             <td rowspan="2">李白td>
 37             <td>19td>
 38             <td>一只鸡td>
 39         tr>
 40 
 41 
 42         <tr>
 43             <td>1td>
 44             
 45             <td>19td>
 46             <td>一只鸡td>
 47         tr>
 48 
 49 
 50         <tr>
 51             <td>1td>
 52             <td>李白td>
 53             <td>19td>
 54             <td>一只鸡td>
 55         tr>
 56 
 57 
 58         <tr>
 59             <td>1td>
 60             <td colspan="3">李白td>
 61             
 62         tr>
 63     table>
 64 
 65 
 66     <hr>
 67 
 68     <table>
 69         <caption><h2>同志信息h2>caption>
 70         <tr>
 71             <th>姓名th>
 72             <td>td>
 73             <th>年龄th>
 74             <td>td>
 75         tr>
 76 
 77         <tr>
 78             <th>性别th>
 79             <td>td>
 80             <th>饭量th>
 81             <td>td>
 82         tr>
 83 
 84         <tr>
 85             <th>自我介绍th>
 86             <td colspan="3">td>
 87         tr>
 88 
 89         <tr>
 90             <th rowspan="6" colspan="2">工作经历th>
 91             <td colspan="2">td>
 92         tr>
 93         <tr>
 94             <td colspan="2"> td>
 95         tr>
 96         <tr>
 97             <td colspan="2">td>
 98         tr>
 99         <tr>
100             <td colspan="2">td>
101         tr>
102         <tr>
103             <td colspan="2">td>
104         tr>
105         <tr>
106             <td colspan="2">td>
107         tr>
108     table>
109 body>
110 html>

跨行跨列

3 表单

3.1 表单的组成(控件)

文本输入框


placeholder 在框内有提示信息，输入字符提示信息消失，在密文里也可以设置，但是没必要，因为密文你也看不到提示信息。
maxlength 设置输入的字符长度。
value 用来传值

密码框


placeholder
maxlength
value

单选按钮

复选框

文件选择

multipe 可以选择多个


multiple 多个

规定类型的文本输入框 (H5)

required跟在后面表示这个里面必须有内容

input:email
input:url
input:number   max/min/step
input:search
input:tel

范围选择框 (H5)

  step属性值是默认为1，可以设置为小数。

颜色选择(H5)

input:color

时间日期(H5)

下拉选项



multiple 多选

多行文本


maxlenth

按钮

input:submit  input:reset  input:button
button:submit button:reset button:button   默认submit

  1 DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>表单title>
  6 head>
  7 <body>
  8     <h1>同志的表单h1>
  9     <hr>
 10     
 11 
 12     
 13     <form action="1.php" method="get" enctype="type/form-data">
 14         <table>
 15             <tr>
 16                 <td>用户名：td>
 17                 <td>
 18                     
 19                     <input type="text" name="username" placeholder="请输入用户名" maxlength="10" required  pattern="\w{3,5}" title="请输入3到5位">
 20                 td>
 21             tr>
 22 
 23             <tr>
 24                 <td>密码：td>
 25                 <td>
 26                     
 27                      <input type="password" name="pwd" placeholder="请输入密码">
 28                 td>
 29             tr>
 30 
 31             <tr>
 32                 <td>性别td>
 33                 <td>
 34                     
 35                     <input type="radio" name="sex" value="male">男
 36                     <input type="radio" name="sex" value="female">女
 37                     <input type="radio" name="sex" value="else" checked>其他
 38                 td>
 39             tr>
 40 
 41             <tr>
 42                 <td>爱好td>
 43                 <td>
 44                     
 45                     <input type="checkbox" name="hobby" value="eat"> 吃
 46                     <input type="checkbox" name="hobby" value="drink" checked> 喝
 47                     <input type="checkbox" name="hobby" value="sleep" checked> 睡
 48                     <input type="checkbox" name="hobby" value="play"> 玩
 49                 td>
 50             tr>
 51 
 52             <tr>
 53                 <td>请选择头像td>
 54                 <td>
 55                     <input type="file" name="avator" multiple>  # multipe 可以选择多个
 56                 td>
 57             tr>
 58 
 59             <tr>
 60                 <td>邮箱td>
 61                 <td>
 62                     
 63                     <input type="email" name="email" placeholder="请输入邮箱" required>
 64                 td> 
 65             tr>
 66 
 67             <tr>
 68                 <td>URLtd>
 69                 <td>
 70                     
 71                     <input type="url" name="url" placeholder="请输入网址">
 72                 td>
 73             tr>
 74 
 75             <tr>
 76                 <td>分数td>
 77                 <td>
 78                     
 79                     <input type="number" name="score" max="1000" min="0" step="0.1" placeholder="请输入数字">
 80                 td>
 81             tr>
 82 
 83             <tr>
 84                 <td>搜索td>
 85                 <td>
 86                     
 87                     <input type="search" name="wd">
 88                 td>
 89             tr>
 90 
 91             <tr>
 92                 <td>电话td>
 93                 <td>
 94                     
 95                     <input type="tel" name="phonenum" placeholder="请输入电话">
 96                 td>
 97             tr>
 98 
 99             <tr>
100                 <td>范围选择td>
101                 <td>
102                     
103                     <input type="range" name="range" max="100" min="0" value="20" step="1" oninput="output.value=range_input.value" id="range_input">
104                     <output id="output">output>
105                 td>
106             tr>
107 
108             <tr>
109                 <td>颜色td>
110                 <td>
111                     
112                     <input type="color" name="color">
113                 td>
114             tr>
115 
116             <tr>
117                 <td>时间日期td>
118                 <td>
119                     
120                     <input type="date" name="date">
121 
122                     
123                     <input type="month" name="month">
124 
125                     
126                     <input type="week" name="week">
127 
128                     
129                     <input type="time" name="time">
130 
131                     
132                     <input type="datetime-local" name="dt">
133                 td>
134             tr>
135 
136             <tr>
137                 <td>
138                     专业
139                 td>
140                 <td>
141                     
142                     <select name="zhuanye">
143                         <option value="computer">计算机option>
144                         <option value="kaogu">考古option>
145                         <option value="makefood">厨师option>
146                         <option value="wajueji" selected>挖掘机option>
147                         <option value="meirongmeifa">美容美发option>
148                     select>
149                 td>
150             tr>
151 
152             <tr>
153                 <td>自我介绍td>
154                 <td>
155                     
156                     <textarea name="content" rows="4" cols="60" placeholder="请输入自我介绍" maxlength="10">textarea>
157                 td>
158             tr>
159 
160 
161             <tr>
162                 <td>提交按钮td>
163                 <td>
164                     <input type="submit" value="提 交">
165                     <button>提 交button>
166                     <button type="submit">提 交button>
167                 td>
168             tr>
169 
170             <tr>
171                 <td>重置按钮td>
172                 <td>
173                     <input type="reset" value="重 置">
174                     <button type="reset">重 置button>
175                 td>
176             tr>
177             <tr>
178                 <td>普通按钮td>
179                 <td>
180                     <input type="button" value="普通按钮">
181                     <button type="button">普通按钮button>
182                 td>
183             tr>
184 
185 
186         table>
187         
188 
189     form>
190 body>
191 html>

多种类型的输入框

3.2 表单标签


   action  method
  type  name  max/min/step  maxlength  checked value  placeholder（H5） list(H5)
  name
  value
 rows cols  name  placeholder




(H5)  嵌套option

3.3 表单验证（H5）

必须

required 属性   给所有可以输入的表单控件

指定类型

email/url/number

正则

pattern 属性 所有可输入 
ttile

3.4 表单控件的通用属性

disabled  所有的表单控件元素 禁用
enabled   可用
readonly  只读  用于可以输入的表单控件(input/textarea)
autofocus  自动获取焦点  所有的表单元素  H5
autocomplete   自动完成 on/off   H5
pattern
title
required

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单title>
 6 head>
 7 <body>
 8     <h1>同h1>
 9     <hr>
10 
11     <form action="1.php" style="width:400px">
12         <fieldset>
13             <legend>注册legend>
14 
15             username: <input type="text" name="username" autocomplete="off"> <br>
16             password: <input type="password" name="pwd"> <br>
17             <button>提交button>
18         fieldset>
19     form>
20     
21     <hr>    
22     <br>    
23     <br>    
24     <br>    
25     <br>    
26 
27     <form action="http://www.baidu.com/s">
28         <input type="text" name="wd" list="mylist" autofocus>
29         <datalist id="mylist">
30             <option value="abc">option>
31             <option value="ab">option>
32             <option value="abcd">option>
33             <option value="bc">option>
34             <option value="bcd">option>
35         datalist>
36 
37         <button>搜索button>
38 
39 
40     form>
41 body>
42 html>

表单控件的通用属性

4 视频/音频(H5)

视频


controls
autoplay
poster= ""
preload 预加载
loop

mp4 / ogg / webm

音频


controls
autoplay
preload
loop

mp3 / wav / ogg

source

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>视频 视频title>
 6     <style>
 7         video {
 8             width: 500px;
 9         }
10     style>
11 head>
12 <body>
13     <h1>同志 视频h1>
14     <hr>
15 
16     <video src="../../dist/media/mv01.mp4" controls autoplay loop poster="../../dist/images_one/10.jpg">video>
17 
18     <audio src="../../dist/media/music.mp3" controls autoplay>audio>
19     <hr>
20 
21     <video>
22         <source src="../../dist/media/mv01.mp4" type="video/mp4">
23         <source src="../../dist/media/mv01.ogg" type="video/ogg">
24         <source src="../../dist/media/mv01.webm" type="video/webm">
25     video>
26 body>
27 html>

视频音频

转载于:https://www.cnblogs.com/Roc-Atlantis/p/9390631.html