Web之HTML、CSS、JS
- Web标准
- 一、HTML（超文本标记语言）
- HTML 基本结构标签
- 常用标签
- 1.font标签
- 2.p标签
- 3.注释
- 4.h系列标题
- 5.img
- 6.超链接a
- 7.列表
- 8.表格
- 9.表单
Web之CSS笔记
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 | 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>
