17.4、JavaWeb-HTML、W3C、基本标签、html的各种标签

1、w3c标准：网页主要由这三部分组成

结构：HTML 表现：CSS 行为：JavaScript

2、HTML入门

1）新建文本文件，后缀名改为.html
2）编写HTML结构标签
3）在中定义文字

  
    
  

  
  
  

1
2
3
4
5
6
7
8
9

3、基本标签

  
  

1
2
3
4

● 转义字符

4、图片、音频、视频标签

img:定义图片

src:规定显示图像的URL（统一资源定位符）
height：定义图像的高度
weith：定义图像的宽度
尺寸单位：
1.px:像素（默认）
2.百分比
audio:定义音频，支持的音频格式：MP3、WAV、OGG
src:规定音频的URL
controls：显示播放控件
vidio：定义视频，支持的视频格式：MP4、WebM、OGG
src:规定视频的URL
controls：显示播放控件

5、超链接标签

href:指定访问资源的URL
target:指定打开资源的方式
_self：默认值，在当前页面打开
_blank:在空白页面打开

6、列表标签

1. 有序列表

		// 表示形式，不赞成使用type
  
111
  
222

1
2
3
4

2. 无序列表

	// 形式，不赞成使用type
  
苹果
  
橘子

1
2
3
4

7、表格标签

	// 设置边框，会发现2条线，将边框线合二为一
    
    	// 每行内容居中
      
序号
      
名称
    
  
    

      
010
      
 
    
  
    
 
    

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

table:定义表格
    > border：规定表格边框的宽度
    > width：规定表格的宽度
    > cellspacing：规定单元格之间的空白
tr：定义行
    > align：定义表格行的内容对其方式
td:定义单元格
    > rowspan:规定单元格可横跨的行数
    > colspan:规定单元格可横跨的列数
1
2
3
4
5
6
7
8
9

8、表单标签

表单：在网页中主要负责数据采集功能，使用标签定义表单

form:
  action:指定表单数据提交的URL
    *表单项数据要想被提交，则必须指定其name属性
  method：指定表单提交的方式
    1.get：默认值
        * 请求参数会拼接在URL后边
        * url的长度有限制：4kb
    2.post：
        * 请求参数会在http请求协议的请求体中
        * 请求参数的长度无限制

    
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14

9、表单项标签–表单项

：表单项，通过type属性空值输入形式
：定义下拉列表， 定义列表项
：文本域
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> 
<p><img src="https://1000bd.com/contentImg/2022/08/09/065700349.png" alt="在这里插入图片描述"></p> 
<pre data-index="8" class="set-code-hide prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">// label标签：点击汉字光标选中输入框
<form action = "#" method = "post">
    <label for = "username">用户名:</label>
    <input type = "text" name = "username"  id = "usernmae"><br>
    密码：<input type = "text" name = "psssword"><br>
    
    性别：	// 单选框
    <input type = "radio" name = "gender" value = "1"> 男	// 属性值一样，保证互斥，
    <input type = "radio" name = "gender" value = "2"> 女	// 加value，不加的提交数据为on
    
    爱好：	//复选框
    <input type = "checkbox" name = "hobby" value = "1"> 旅游
    <input type = "checkbox" name = "hobby" value = "1"> 电影
    <input type = "checkbox" name = "hobby" value = "1"> 游戏
  
    头像：		// 文件
    <input type = "file"> 上传文件
  
    城市：	// 下拉列表
    <select name = "city">
      <option value = "shanghai">北京</option>	// 加value将value值提交，不加提交中文
      <option>广州</option>
      <option>上海</option>
    </select>
  
    个人描述：			// 文本域
    <textarea cols = "20" rows = "5" name = "desc">		
    
  
    

    

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