目录
简单介绍
- html:超文本标记语言(Hyper Text Markup Language),是一种用来描述网页的标记语言,包含了一系列的标签,通过这些标签来对网页进行文档制作,主要用于制作网页的内容。其中超文本指的是:1.超越文本限制(如:图片,视频等);2.超级链接文本。
- css:层叠样式表(Cascading Style Sheet),也属于标记语言,主要用于设置html页面中的文本内容(字体,大小,对齐方式等),图片的外形(宽高,边框样式,边距等),以及版面的布局和外观显示样式。
- js:(JavaScript)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言,作于web网页的脚本语言而出名,可用于后端的开发。
HTML常用标签
1.html骨架标签
- 根标签:<html> </html>
- 头标签:<head> </head>
- 标题标签:<title> </title>
- 身体标签:<body> </body>
<!--html基本格式-->
<html>
<head>
<title>标题</title>
</head>
<!--<head>标签和<title>标签是包含关系-->
<body>
内容
</body>
<!--<head>标签和<body>标签是并列关系-->
</html>
<!DOCTYPE html>
<!--文档类型声明标签,告诉浏览器用html5来显示页面-->
<html lang="en">
<!--lang是language的缩写,定义语言。“en”是英语,“zh-CN”是中文,“fr”是法语-->
<!--定义一种语言,文档中写另一种语言可能会乱码,同时浏览器也可能会有是否翻译页面的提示-->
<head>
<meta charset="UTF-8">
<!--charest是字符集,UTF-8是万国码,没有这个网页可能会乱码-->
<title>标题</title>
</head>
<body>
内容
</body>
</html>
2.标题标签
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
标题标签中的内容会改变字号、字体加粗,从h1到h6标题的字体依次变小。
3.段落标签
<p>paragraph</p>
在段落标签中隔开的两段之间有间隙。
4.换行标签
<br />
换行标签是单标签,break的缩写
用换行标签的换行,两行之间无间隙。
5.文本格式化标签
加粗 | <strong> </strong>或者<b> </b> | <strong>语气更强烈 |
---|---|---|
倾斜 | <em> </em>或者<i> </i> | <em>语气更强烈 |
删除线 | <del> </del>或者<s> </s> | <del>语气更强烈 |
下划线 | <ins> </ins>或者<u> </u> | <ins>语气更强烈 |
文本格式化标签的作用是突出部分内容。
6.div标签,span标签和pre标签
<div>division:分割,分区</div>
<span>span:跨度,跨距</span>
<pre> </pre>
<div>中的内容会单独占一行,如果在</div>后加内容,其后内容会单独占一行;
<span>中的内容会与<span>外的内容用空格隔开;
<pre>中的内容会按照原有格式保留,空格和换行也会保留;
div标签和span标签属于无语义布局。
7.图像标签
<img src="图像url" />
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性,在图像标签中必须有该属性 |
alt | 文本 | 替换文本,当图像不能显示的时候显示文字 |
title | 文本 | 提示文本,把鼠标放到图像上的时候会显示文字 |
width | 像素 | 设置图片的宽度 |
height | 像素 | 设置图片的高度 |
border | 像素 | 设置图片的边框粗细 |
在width和height属性中二选一填入,可以将图片等比例缩放。
- 图像标签可以拥有多个属性,必须写在标签名的后面
- 属性部分先后顺序,标签名与属性、属性与属性之间均以空格分开
- 属性采取键值对的格式,属性=“属性值”
图片路径
打开目录文件夹的第一层叫根目录
1)相对路径(图片当对于html页面的位置,建立出目录路径)
路径 | 符号 | 说明 | 格式 |
---|---|---|---|
同一级路径 | 图片位于html同一级 | <img src="img.jpg" /> | |
下一级路径 | / | 图片位于html下一级 | <img src="images/img.jpg" /> (假设img.jpg在images文件夹中,并且该文件夹与html文件同级) |
上一级路径 | ../ | 图片位于html上一级 | <img src="../img.jpg" /> |
2)绝对路径
- 在电脑中的位置,如:D:\....\
- 网络上的位置:完整的网络路径
8.超链接标签
<a> anchor 锚
<a href="目标地址" target=" ">文本/图片</a>
href为必须属性
target定义新窗口的打开方式,属性值_self从当前窗口打开,_blank从新窗口打开。
链接方式 | 说明 |
---|---|
外部链接 | 网址 |
内部链接 | 网页名称,如xxx.html |
空链接 | # |
下载链接 | .exe文件或.zip文件 |
网页元素链接 | 如:文本、图片、表格、音频等添加超链接 |
锚点链接 | 点击后可快速定位到页面中的某个位置 |
锚点链接
例:
<a href="#123">第一章</a>
找到目标标签<h3 id="123">第一章</h3>
9.注释标签
<!--注释-->
10.表格标签
表格用来展示数据
<!--表格格式-->
<table>
<!--<table>定义表格标签-->
<thead>
<!--<thead>定义表格的头部区域-->
<tr> <th></th> </tr>
<!--<tr>table row定义表格的行-->
<!--<th>table header cell表头一般用于第一行第一列,将文本居中加粗-->
</thead>
<tbody>
<!--<tbody>定义表格的主体区域-->
<!--<thead>和<tbody>将表格的头部区域和主体区域分开,可根据需求添加或者删除-->
<tr> <td></td> </tr>
<!--<td>table data cell-->
</tbody>
</table>
属性 | 属性值 | 说明 |
---|---|---|
align | left,center,right | 规定表格对其方式 |
border | 1或“” | 规定表格是否有边框,默认值为“”,无边框 |
cellpadding | 像素值 | 规定表格边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定表格单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
以上表格属性不太常用,表格的形式一般用css设置
合并单元格
- 跨列合并:colspan="合并单元格个数"
- 跨行合并:rowspan="合并单元格个数"
合并三部曲
- 先判断需要的是跨行还是跨列
- 找到目标单元格,写合并方式和数量
- 删除多余的单元格
例:
<!--跨列原码-->
<tr> <td></td> <td></td> <td></td> </tr>
<!--跨列后-->
<tr> <td></td> <td colspan="2"></td> </tr>
<!--跨行原码-->
<tr> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> </tr>
<!--跨行后-->
<tr> <td rowspan="2"></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> </tr>
11.列表标签
列表是用来布局的
<!--无序列表-->
<ul>
<li></li>
</ul>
<!--<ul>unordered list无序列表,在网页显示的时候,每个小例前面都有一个小黑点-->
<!--<li>list item-->
<!--<ul>中只能放<li>,<li>中可以放任意元素-->
<!--有序列表-->
<ol>
<li></li>
</ol>
<!--<ol>ordered list无序列表,在网页显示的时候,每个小例前面都有数字序号-->
<!--<ol>中只能放<li>,<li>中可以放任意元素-->
<!--有序列表和无序列表前面的符号都可以通过css删去-->
<!--自定义列表-->
<dl>
<dt>大标题</dt>
<dd>内容</dd>
<dd>内容</dd>
</dl>
<!--<dl>中只能放<dt>和<dd>,<dt>和<dd>数量不限,一般是一个<dt>对应多个<dd>-->
<!--<dt>和<dd>中可以放任何元素
12.表单标签
表单一般用于收集信息
<form>定义表单域
属性 | 属性值 | 说明 |
---|---|---|
action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 |
method | get/post | 设置表单数据的提交方式 |
name | 名称 | 指定表单的名称 |
1)输入表单元素
<input />是单标签
<input type="属性值" />
属性值 | 说明 |
---|---|
text | 单行的输入字段 |
password | 密码字段,该字段中的字符被掩码 |
radio | 单选按钮(同一个选择列表要有相同的属性name) |
checkbox | 复选框(同一个选择列表要有相同的属性name) |
reset | 重置按钮(可用属性value改变按钮上的字) |
submit | 提交按钮(可用属性value改变按钮上的字) |
image | 图像形式的提交按钮 |
file | 输入字段和“浏览”按钮,供文件上传 |
button | 可点击按钮(一般通过js启动) |
hidden | 隐藏的输入字段 |
属性 | 属性值 | 说明 |
---|---|---|
name | 自定义 | 定义input元素的名称 |
value | 自定义 | 规定input元素的值,如“请输入” |
checked | checked | 打开后默认选中有该属性的值 |
maxlength | 正整数 | 输入字符最大长度 |
<label>标签为input元素定义标注
当点击<label>标签内的文本时,浏览器会自动将光标转到对应的表单元素进行选择,增加用户的体验感。
例:
<label for="boy">男</label>
<input type="radio" name="sex" id="boy" />
<label for="girl">女</label>
<input type="radio" name="sex" id="girl" />
<!--此时点汉字“男”或者“女”时都可以选择到对应的选择框中-->
<!--for属性和对应的id属性的属性值应该相同-->
2)下拉表单元素
<select>
<option selected="selected"></option>
<!--当<option>标签有属性selected时,打开页面会自动选择<option>中的内容-->
<option></option>
<option></option>
</select>
3)文本域表单元素
textarea 文本域表单元素,可输入多行文本
属性cols="每行字符数”,rows=“行数”
(这个属性一般不用,一般会用css显示文本域的宽高)
特殊字符
符号 | 符号码 |
---|---|
空格符 |   |
< | &it |
> | > |
& | & |
摄氏度符号 | ° |
正负号 | ± |
乘号 | × |
除号 | ÷ |
平方号 | ² |
立方号 | ³ |
在html文件中输入符号码,在页面中会直接显示符号。
标签查阅网址
百度:百度一下,你就知道 (baidu.com)https://www.baidu.com/
W3C:w3school 在线教程https://www.w3school.com.cn/
MDN:MDN Web Docs (mozilla.org)https://developer.mozilla.org/zh-CN/