<html>
html有<head>和<body>,<head>放在<body>前面。
<head>里放<meta>或者<title>等。
<body>中放内容
在html中标签一般都是成对出现,但有的特殊。
1、<head>
其中有<title>标签:里面放文章标题
也有<meta>标签设置当前文件字符编码: 例如
<meta charset=“UTF-8”>
<style>标签:设置当前文件样式
2、<body>
<body>中放文本的内容
下面这些也可以不在body中使用,在外面也能用
<h>是标题标签
<h1><h2><h3><h4><h5><h6>
这个标签有一级标签、二级标签等等,一共6个,按照重要性来排
<p>是段落的标签
3、<html>的注释
<!--这里放注释 end-->
4、创建列表
①无序列表
例如
在使用列表的时候就像这样的代码:
<ul>
<li>我的第一个列表</li>
<li>我的第二个列表</li>
</ul>
输出如下结果:
- 我的第一个列表
- 我的第二个列表
<ul>是无序列表的意思,ul 是 Unordered List(无序列表)的缩写。
<li>中放的是列表名称,li是List iteam的缩写
②有序列表
有序列表和无序列表没有太大差别
用标签<ol><li>来表示,在网页中的显式中,每项<li>前都自带序号 例如:
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>
输出结果:
- 前端开发面试心法
- 零基础学习html
- JavaScript全攻略
<ol>代表有序列表,是Ordered List(有序列表)的缩写
同<ul>一样<li>中放列表的名称
5、向网页中添加图片
格式:
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
这个title是,当我们的鼠标放在图片上时提示的文字。
这个alt是当图像下载不成功时显式的文本
例如我们添加个索隆图片:
<img src = “https://profile.csdnimg.cn/0/5/8/3_vanliujian” alt = “加载失败” title = “这是海贼王里的索隆”>
运行如下:
总的来说就三个属性:
src:地址
alt:下载失败时显示的文本
title:对图片的描述
6、向网页中添加超链接
使用<a>标签
代码如下:
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
例如在这里我们跳转到百度网站。
<a href= "https://www.baidu.com" title="百度网址"> 百度</a>
运行后如下:
百度
注意网址需要写全,把http也带上。链接显示的文本就是用户界面所看见的文字,看上面运行后的结果为百度,那么百度就为链接显示的文本。
7、通过超链接打开网页的界面
当我们通过超链接打开网页时,可以打开一个新的网页,也可以覆盖原来的网页。<a>标签是用来做超链接的。<a>标签有target属性,target有两个选值,"_self"代表在当前页面打开,_blank代表重新打开一个网页,在这个新的网页打开。
不过默认值是_self
① 重新打开一个网页
<a href = "http://www.baidu.com" target = "_blank"> 百度</a>
②在这个页面打开网页
<a href = "http://www.baidu.com" target = "_self"> 百度</a>
百度
//这儿我也不知道能不能打开,我在写笔记的时候打开,不管怎样都是重新打开一个网页,可能是界面不一样,我在记事本中写的时候,就可以在本页面打开。
8、制作表格的第一种方式
例如下面这个代码运行后输出下面那个图:
<table border="10">
<caption>前端三剑客</caption>
<tr>
<th>知识点</th>
<th>重要程度</th>
<th>难度</th>
<th>学习周期</th>
</tr>
<tr>
<td>html</td>
<td>5星</td>
<td>3星</td>
<td>7天</td>
</tr>
<tr>
<td>css</td>
<td>5星</td>
<td>4星</td>
<td>10天</td>
</tr>
<tr>
<td>html</td>
<td>5星</td>
<td>5星</td>
<td>20天</td>
</tr>
知识点 | 重要程度 | 难度 | 学习周期 |
---|---|---|---|
html | 5星 | 3星 | 7天 |
css | 5星 | 4星 | 10天 |
html | 5星 | 5星 | 20天 |
1、其中table中的border属性表示表格线的粗细程度。
2、<caption>表示表格名称
3、<tr>表示表格的行
4、<th>表格的列,字体加为粗体
5、<td>表格的列,字体为正常的文本格式
9、制作表格的第二种方式
为什么会有第二种方式呢?
是因为我们要是等表格加载完成后再看表格,如果那个表格过大就会浪费时间,所以我们现在将表格分段,分段加载,分段显式,就可以节省时间。
使用
<thead> :表格的开头
<tbody> :表格的内容
<tfoot> :表格的结尾
<th><tr><td>在上述已经写过
见下列代码和所运行出的图
<table>
<caption>成绩表</caption>
<thead><tr>
<th>科目</th>
<th>分数</th>
</tr></thead>
<tbody>
<tr>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分</td>
<td>299</td>
</tr>
<tfoot>
</table>
科目 | 分数 |
---|---|
语文 | 99 |
数学 | 200 |
总分 | 299 |
10、表单的制作<form>
网站与用户进行交互就需要用到表单,表单的作用:把浏览者输入的数据传送到服务器端。
语法:
<form method="传送方式" action="服务器文件">
传送的方式有post和get,但最好用post,因为post比较安全。
这里可以看下这个博客更容易理解post和get的区别:
https://www.cnblogs.com/hnrainll/archive/2011/06/07/2074593.html
服务器文件:PHP是一种网页语言。
文本输入框,密码输入框。
text是文本输入;
passworld是密码输入;
name为文本框命名(便于后台使用)
value为文本框赋默认值(起到提示作用)
<form>
<input type="text/password" name="名称" value="文本" />
</form>
下面用QQ账号作为例子:
<form method = "post" action = "save.php">
QQ账号<input type = "text" name = "账号文本" value = "请输入账号" /> <br />
QQ密码<input type = "passworld" name = "密码" value = "请输入您的qq密码" />
</form>
运行如下:
11、<input>
占位符 placeholder
有时候需要提示用户输入框的,就需要用到占位符。
placeholder与value,placeholder并不会被表单提交,只有value为空时placeholder才显示出来。
placeholder的例子:
<input type = "text" placeholder = "请输入用户名"><br />
<input type = "text" placeholder = "请输入密码">
数字框的输入
<input type = "number">
网址输入框
里面只能放http://或https://开头,如果不以这些开头会报错。
<input type = "url">
邮箱输入框
其中必须包含@,@后必须有内容,否则会报错误提示。
<input type = "email">
12、文本输入
当用户需要在表单中输入大段的文字时,需要用文本输入。
<textarea>标签有cols和rows属性
cols:列数
rows:行数
举例:
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>
输出结果:
13、<lable>标签 ***
语法:
<label for="控件id名称">
其for属性的值必须与控件的id属性值相同 如下:
<form>
<label for="uname">输入你的用户名</label>
<input type="text" id="uname" placeholder="Enter uname">
<br>
<label for="pass">输入你的密码</label>
<input type="password" id="pass" placeholder="Enter password">
</form>
14、单选框和复选框
语法:
<input type="radio/checkbox"
value="值" name="名称" checked="checked"/>
1、radio表示单选框,checkbox表示复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked=“checked” 时,该选项被默认选中
15、下拉菜单
使用select和option标签创建下拉菜单
option(可选择的事物,选择,选择权,选修课)
select(选择,挑选,选拔)
当设置selected="selected"时,该选项就被默认选中。
<form>
<select>
<option value="看书">看书</option>
<option value="旅游" selected = "selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
运行如下:
16、提交与重置按钮
提交按钮 语法:
<input type="submit" value="提交">
只有type为submit时才有提交作用,value为按钮上显示的文字。
重置按钮 语法:
<input type="reset" value="重置">
同样,只有type为reset时才有重置作用,value还是按钮上显示的文字。
零散知识点
<div>把独立的逻辑部分拿出来
<header>头部标签,和div差不多
<footer>用来定义底部区域,作用和<header>差不多
<section>标签用来定义一个区域,和<header>差不多
<span>标签,在使用之前要在style中声明一下
span {
color:blue;
}
<aside>侧边栏标签
<br />是换行符,在html中换行和空格全是省略的
是空格符