-
Web之HTML笔记
Web标准
- 结构标准用于对网页元素进行整理和分类(HTML)
- 表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)
- 行为标准用于对网页模型的定义及交互的编写(JavaScript)
一、HTML（超文本标记语言）
HTML 基本结构标签
标签名 含义 说明 HTML标签 页面中的最大的标签，称为跟标签 文档的头部 注意在head标签中必须要设置的标签是title 文档的标题 让页面拥有一个属于自己的网页标题 文档的主体 元素包含文档的所有内容，页面内容基本都是放到body里面的 常用标签
1.font标签
部分常用属性（html5不支持该标签，建议使用CSS）：
color属性：修改颜色 face属性：修改字体（类型） size属性：修改文本大小（1-7）- 1
- 2
- 3
<font color="red" face="黑体" size="3">font字体标签font>- 1
font字体标签
2.p标签
全称paragraph，用来表示段落，它是一个行内元素，一个标签独占一行。
<p>......p>- 1
......
<br>：全称barter rabbet,换行标签，用于插入一个换行符。- 1
3.注释
- 1
4.h系列标题
到：标题标签，用于定义标题的级别，是最高级别的标题，依次递减。<h1>标题标签1h1> <h2>标题标签2h2> <h3>标题标签3h3> <h4>标题标签4h4> <h5>标题标签5h5> <h6>标题标签6h6>- 1
- 2
- 3
- 4
- 5
- 6
标题标签1
标题标签2
标题标签3
标题标签4
标题标签5
标题标签6
5.img
<img src="test.jpg" alt="风景" title="夜景" height="100" />- 1
常用属性
alt属性：alt属性用于指定图像的替代文本。当图像无法加载时，替代文本会显示在图像的位置。 width和height属性：width和height属性用于指定图像的宽度和高度。可以使用像素(px)、百分比(%)或其他单位来指定。 title:提示文本,鼠标放到图片上,就会有提示- 1
- 2
- 3
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>- 1
- 2
- 3
- 4
- 5
- 6
网址直接跳转
相对路径跳转
如果是打不开的文件，则下载之
空链接是刷新
#是回到顶部
禁止链接跳转常用属性
target:打开方式,默认是_self.如果是_blank则用新的标签页打开- 1
锚点
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
第一集剧情
第一集剧情
...第二集剧情
第二集剧情
...第三集剧情
第三集剧情
...2.跳转到不同页面的不同位置
<a href=”demo.html#锚点名称”>demo.html页面 xxx元素位置a> <a href=”demo.html#box”>demo.html页面box元素位置a>- 1
- 2
- 3
7.列表
ul ——无序列表
<ul> <li>无序列表1li> <li>无序列表2li> <li>无序列表3li> <li>无序列表4li> ul>- 1
- 2
- 3
- 4
- 5
- 6
- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表4
ol ——有序列表
<ol> <li>有序列表1li> <li>有序列表2li> <li>有序列表3li> <li>有序列表4li> ol>- 1
- 2
- 3
- 4
- 5
- 6
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表4
8.表格
一种用于展示结构化数据的标记语言元素。
表格由标签来定义。每个表格均有若干行（由
标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。 caption标签:表格的标题 thead标签:表格的页眉 tbody标签:表格的主体 tfoot标签:表格的页脚 th标签:行/列的标题，文字加粗显示- 1
- 2
- 3
- 4
- 5
<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>1td> <td>草鱼td> <td>18.6td> tr> <tr valign="top"> <td>2td> <td>鲤鱼td> <td>28.9td> tr> <tr> <td>3td> <td>食人鱼td> <td>1000td> tr> tbody> table>- 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
鲜鱼价目表 序号 鱼的种类 价格 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 border="1px" width="300px" height="200px"> <tr> <td colspan="2">1-1td> <td>1-3td> <td>1-4td> tr> <tr> <td>2-1td> <td rowspan="2">2-2td> <td>2-3td> <td>2-4td> tr> <tr> <td>3-1td> <td>3-3td> <td>3-4td> tr> table> <hr>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
1-1 1-3 1-4 2-1 2-2 2-3 2-4 3-1 3-3 3-4
9.表单
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。<form>表单标签 <input type="text">表单域 <button type="submit">提交按钮button > form>- 1
- 2
- 3
- 4
- 5
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.comoption> <option value="2">163.comoption> <option value="3">tongji.edu.cnoption> select>- 1
- 2
- 3
- 4
- 5
selected标注默认选中的内容。
textarea标签创立多行文本框
<textarea name="introduction" id="introduction" cols="30" rows="10">textarea>- 1
表单示例
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">1995option> <option value="1996">1996option> <option value="1997" selected="selected">1997option> <option value="1998">1998option> <option value="1999">1999option> <option value="2000">2000option> select>年 <select> <option value="1">01option> <option value="2">02option> <option value="3">03option> <option value="4">4option> <option value="5">5option> select>月 <select> <option value="1">01option> <option value="2">02option> <option value="3">03option> <option value="4">4option> <option value="5">5option> select>日<br> 头像<img src="image/headLogo/13.gif"> <select> <option value="1">1option> <option value="2">2option> <option value="3">3option> <option value="4">4option> 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">1option> <option value="2">2option> <option value="3">3option> <option value="4">4option> <option value="4">41option> <option value="42">42option> <option value="43">43option> <option value="44">44option> <option value="45">45option> select> <select size="4" multiple="true"> select> body> html>- 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
- 相关阅读:
『力扣每日一题06』字符串中的第一个唯一字符
封装图片处理工具类，实现图片的裁剪、压缩、图片水印、文字水印、多行文字水印等功能
写论文工具：LaTex在线网站
java-web阶段的总结
毕业设计之基于Vue的数据可视化平台
Ubuntu 20.04 安装搜狗输入法，无法输入中文问题
【Java笔试强训】Day5（45842-统计回文、58539-连续最大和）
java毕业生设计疫情防控医用品管理计算机源码+系统+mysql+调试部署+lw
Java常用类方法总结
Linux ❀ ps进程操作与僵尸进程解决方法
- 原文地址：https://blog.csdn.net/qq_45832050/article/details/134346218
