Web之HTML笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_45832050/article/details/134346218

本文详细介绍了Web开发中的基础知识，包括HTML的基本结构、CSS样式设置、JavaScript的使用以及HTML表单的构建，涵盖了标签、属性、布局和交互等内容。

摘要由CSDN通过智能技术生成

Web之HTML、CSS、JS

Web标准
- 一、HTML（超文本标记语言）

Web之CSS笔记
Web之JavaScript(jQuery)笔记

Web标准

结构标准用于对网页元素进行整理和分类(HTML)
表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)
行为标准用于对网页模型的定义及交互的编写(JavaScript)

一、HTML（超文本标记语言）

HTML 基本结构标签

标签名	含义	说明
`<html></html>`	HTML标签	页面中的最大的标签，称为跟标签
`<head></head>`	文档的头部	注意在head标签中必须要设置的标签是title
`<title></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

常用标签

1.font标签

部分常用属性（html5不支持该标签，建议使用CSS）：

color属性：修改颜色
face属性：修改字体（类型）
size属性：修改文本大小（1-7）

<font color="red" face="黑体" size="3">font字体标签</font>

font字体标签

2.p标签

全称paragraph，用来表示段落，它是一个行内元素，一个标签独占一行。

<p>......</p>

......

<br>：全称barter rabbet,换行标签，用于插入一个换行符。

3.注释

<!-- 需求： 在网页上显示 font字体标签 ， 并修改字体为 黑体， 颜色为红色。-->

4.h系列标题

<h1>到<h6>：标题标签，用于定义标题的级别，<h1>是最高级别的标题，依次递减。

<h1>标题标签1</h1>
<h2>标题标签2</h2>
<h3>标题标签3</h3>
<h4>标题标签4</h4>
<h5>标题标签5</h5>
<h6>标题标签6</h6>

标题标签1

标题标签2

标题标签3

标题标签4

标题标签5

标题标签6

5.img

<img>: 图像标签，用于插入图像；通过src属性指定图像的URL，可以是相对路径或绝对路径。

<img src="test.jpg" alt="风景" title="夜景" height="100" />

常用属性

 alt属性：alt属性用于指定图像的替代文本。当图像无法加载时，替代文本会显示在图像的位置。
 width和height属性：width和height属性用于指定图像的宽度和高度。可以使用像素(px)、百分比(%)或其他单位来指定。
 title:提示文本,鼠标放到图片上,就会有提示

6.超链接a

用于从一个页面链接到另一个页面。

<a href="https://bilibili.com">网址直接跳转</a> 
<a href="images/1.webp">相对路径跳转</a>
<a href="hello.exe">如果是打不开的文件，则下载之</a>
<a href="">空链接是刷新</a>
<a href="#">#是回到顶部</a>
<a href="javascript:;">禁止链接跳转</a>

网址直接跳转
 相对路径跳转
 如果是打不开的文件，则下载之
 空链接是刷新
 #是回到顶部
禁止链接跳转

常用属性

target:打开方式,默认是_self.如果是_blank则用新的标签页打开

锚点

href里面为#id变为锚点功能，点击跳转到id对应的块。

1.快速定位到页面中的某个位置。

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
   第一集剧情 <br>
   第一集剧情 <br>
   ...
</p>
<p id="two">
   第二集剧情 <br>
   第二集剧情 <br>
 ...
</p>
<p id="three">
   第三集剧情 <br>
   第三集剧情 <br>
 ...
</p>

第一集
 第二集
 第三集

第一集剧情
第一集剧情
...

第二集剧情
第二集剧情
...

第三集剧情
第三集剧情
...

2.跳转到不同页面的不同位置

<a href=”demo.html#锚点名称”>demo.html页面 xxx元素位置</a>

<a href=”demo.html#box”>demo.html页面box元素位置</a>

demo.html页面 xxx元素位置

demo.html页面box元素位置

7.列表

ul ——无序列表

 <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
 </ul>

无序列表1
无序列表2
无序列表3
无序列表4

ol ——有序列表

  <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>

有序列表1
有序列表2
有序列表3
有序列表4

8.表格

一种用于展示结构化数据的标记语言元素。
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

caption标签:表格的标题
thead标签:表格的页眉
tbody标签:表格的主体
tfoot标签:表格的页脚
th标签:行/列的标题，文字加粗显示

<table border="1px" bgcolor="green" bordercolor="yellow" width="300px"
		height="175px">
			<caption>鲜鱼价目表</caption>
			<thead><!-- 表头部分 -->
				<tr>
					<th>序号</th>
					<th>鱼的种类</th>
					<th>价格</th>
				</tr>
			</thead>
			<tbody> <!--表主体部分-->
				<tr align="center">
					<td>1</td>
					<td>草鱼</td>
					<td>18.6</td>
				</tr>
				<tr valign="top">
					<td>2</td>
					<td>鲤鱼</td>
					<td>28.9</td>
				</tr>
				<tr>
					<td>3</td>
					<td>食人鱼</td>
					<td>1000</td>
				</tr>
			</tbody>
		</table>

鲜鱼价目表
序号	鱼的种类	价格
1	草鱼	18.6
2	鲤鱼	28.9
3	食人鱼	1000

table标签的属性

border=“1px” 设置边框
bgcolor=“green” 设置背景颜色
bordercolor=“yellow” 设置边框颜色
width=“300px” 设置表格的宽度
height=“175px” 设置表格的高度
table表格里的边框是带有间距的解决方案就是给table标签加: style="border-collapse: collapse;" 去掉边框间的间距
align=“center” 设置表格本身的水平对齐方式，注意不是文字居中，而是整张表格在页面居中显示

tr标签的属性

align=“” 设置内容的水平对齐方式 left靠左/center居中/right靠右
valign=“” 设置内容的垂直对齐方式 top靠上/middle居中/bottom靠下

td标签的属性

colspan=“n” 跨列，从当前单元格开始，向右合并n个单元格(n也包含当前单元格)
rowspan=“n” 跨行，从当前单元格开始，向下合并n个单元格(n也包含当前单元格)

<!-- table>tr*3>td*4 在数字后按Tab补全-->
	<table border="1px" width="300px" height="200px">
		<tr>
			<td colspan="2">1-1</td>
			<!-- 被合并的单元格一定得删掉 -->
			<!-- <td>1-2</td> -->
			<td>1-3</td>
			<td>1-4</td>
		</tr>
		<tr>
			<td>2-1</td>
			<td rowspan="2">2-2</td>
			<td>2-3</td>
			<td>2-4</td>
		</tr>
		<tr>
			<td>3-1</td>
			<!-- 被合并的单元格一定要删掉！ -->
			<!-- <td>3-2</td> -->
			<td>3-3</td>
			<td>3-4</td>
		</tr>
	</table>
	<hr> <!-- 创建一条水平线 -->

1-1		1-3	1-4
2-1	2-2	2-3	2-4
3-1	2-2	3-3	3-4

9.表单

HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。

<form>表单标签  
	<!-- 表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等 -->
    <input type="text">表单域 
    <button type="submit">提交按钮</button >
</form>

input属性

type

type值	表单类型
text	单行文本框
passworld	密码文本框
button	按钮
reset	重置按钮
image	图像形式的提交按钮
radio	单选按钮
checkbox	复选框
hidden	隐藏字段
file	文件上传

name属性：给出当前input表单的名字。
value属性：表示该input表单的默认值。
1）当input type=“text”、“password”、"hidden"时，value中的值会成为其输入框的初始值；
2）当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本；
3）当input type=“checkbox”、“radio”、"image"时，定义与输入相关联的值；
注意：input type="checkbox"和input type="radio"中必须设置
value属性；value属性无法与input type="file"一通使用。
style属性：为input元素设置简单的CSS样式。
width属性：当input type="image"时，通过width属性控制元素的宽度；
height属性：当input type="image"时，通过height属性控制元素的高度；
maxlength属性：定义input元素中可输入的最长字符数。

select和option创建下拉式表单

<select>      
    <option value="1" selected="selected">qq.com</option>
    <option value="2">163.com</option>
    <option value="3">tongji.edu.cn</option>
</select>

selected标注默认选中的内容。

textarea标签创立多行文本框

<textarea name="introduction" id="introduction" cols="30" rows="10"></textarea>

表单示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	<form action="" method="">
		<label>请输入姓名：</label>
		   <input type="text" name="" id=""><br>
		<label>请输入密码：</label>
			<input type="password" name="" id=""><br>
		<label>再次输入密码：</label>
			<input type="password" name="" id=""><br>
		<lebel>性别：</lebel>
			<input type="radio" name="xb" id="" value="1">男
			<input type="radio" name="xb" id="" value="0">女<br>
		<label>兴趣爱好</label>
			<input type="checkbox" name="" id="" value="1">游泳
			<input type="checkbox" name="" id="" value="2">看书
			<input type="checkbox" name="" id="" value="3">爬山
			<input type="checkbox" name="" id="" value="4">思考<br>
		<label>生日：</label>
			<select>
				<option value="1995">1995</option>
				<option value="1996">1996</option>
				<option value="1997" selected="selected">1997</option>
				<option value="1998">1998</option>
				<option value="1999">1999</option>
				<option value="2000">2000</option>
			</select>年
			<select>
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">4</option>
				<option value="5">5</option>
			</select>月
			<select>
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">4</option>
				<option value="5">5</option>
			</select>日<br>
			头像<img src="image/headLogo/13.gif">
			<select>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
			</select><br>
			<input type="button" value="普通按钮">
			<input type="submit" value="提交按钮">
	</form>
	<textarea rows="10" cols="100" name="" id="">
	  请输入
	</textarea>
	<input type="file"><input type="button" value="上传"><br>
	000<input type="hidden" name="" id="">000
	       <select size="4" multiple="true">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="4">41</option>
				<option value="42">42</option>
				<option value="43">43</option>
				<option value="44">44</option>
				<option value="45">45</option>
			</select>

			 <select size="4" multiple="true">
			 </select>
</body>
</html>