什么是网页
网页由三部分组成:结构、外观、行为
-
结构就是用html来写
对网页元素(图片、文本)进行整理和分类 -
外观就是css来写
对板式、颜色、大小等外观进行调整 -
行为就是用JavaScript来写
对网页交互的编写
HTML语法规范
头部标签:
<title>
标题标签
<meta />
元信息标签
<meta name="名称" content="值" />
定义页面元信息
<style>
内嵌样式标签 使用内嵌CSS样式
1.标签
超文本标记语言由标签组成
标签成对出现,而且放在尖括号里
<html></html>
就是开始和结束标签
单标签:<br />
<meta />
<hr />
<img />
2.标签关系
可以嵌套、可以并列
3.骨架标签
4.文本控制标签
-
标题标签
<h1>-<h6>
分别代表1到6级标题
一个标题独占一行 -
段落标签、换行标签、水平线标签和注释标签
<p></p>
用于定义段落<br />
单标签 用于换行
简单的开始新的一行<hr 属性="属性值" />
单标签 添加网页水平线
属性有align(对齐方式)、size(粗细)、color、width(宽度)<!-- 注释语句 -->
注释标签,或者直接ctrl+/ -
文本格式化标签
重点:strong标签和em标签 -
<div>
标签和<span>
标签
就是两个盒子,用来装东西div :division的缩写,代表分割、分区。
是一个大盒子,一行只能放一个<div>
(一个人独占一行)span :意为跨度、跨距。
是一个小盒子,一行能放多个<span>
-
图像标签和路径
1.<img>
单标签 用于定义html页面中的图像
<img scr="图像的URL"/>
用scr来指定图像文件路径和文件名
2. 图像标签的其他属性:
图像标签可以有很多属性,属性与属性之间用空格分开
- 相对路径:图片相对于html文件位置的路径
<img scr="../images/baidu.gif">
…代表上一级路径 - 绝对路径:直达目标位置。
可以是盘符的位置,也可以是网络上的地址位置
6.超链接标签
语法格式:
<a herf="调转目标" targat="窗口弹出方式"> 文本或图像 </a>
self是默认值
7.锚点链接
可以直接跳转到页面的某个位置,常用在目录。
1.先在目标链接中添加id属性:<h3 id="key">这个位置</h3>
2.再添加相应的链接:<a href="#key">跑到那个位置</a>
一般是做完整个网页之后,最后来弄锚点链接
8.特殊字符
一些特殊的符号不方便直接使用,所以用字符来替代。
重点是空格,大于小于号,其他的要用时回来查阅。
5.表格、列表、表单标签
1).表格标签
1.表格的基本语法
表格不是展示页面的,而是用来表示数据的
1.<table></table>
定义表格标签
<thead></thead> <tbody></tbody>
表格结构标签
<tr></tr>
定义表格中的行
<th> </th>
定义表头部分单元格 自动加粗、居中
<td></td>
定义表格中的单元格
2.表格属性
认识英语单词,之后CSS会用
直观感受表格的外观形态
写入表格标签table里去
3.合并单元格
跨行合并:<td rowspan="合并单元格的个数">
跨列合并:<td colspan="合并单元格的个数">
也就是对单个表格进行操作,这个表格叫目标单元格
1.确定跨行合并还是跨列合并
2.找到目标单元格,跨行是以最上方的,跨列是最左边的,然后写入属性
3.删除掉多余的单元格
2).列表标签
列表的基本语法
表格是用来展示数据的,列表就是用来布局页面的
最大特点就是整齐、整洁、有序
1.无序列表 (重点)
<ul></ul>
定义列表标签
<li></li>
无序列表中的行
ul中 只能放li标签 不能放其他任何文字或标签
<li></li>
相当于以一个大的容器,可以放其他任何标签
2.有序列表 (理解)
有序列表,有一定的顺序,在前面会自动添加序号
<ol></ol>
定义列表标签
<li></li>
有序列表中的行 和无序列表一样
ol中 只能放li标签 不能放其他任何文字或标签
3.自定义列表 (重点)
一个大哥领着一群小弟
也就是对名词或者术语来解释和描述
<dl></dl>
定义列表标签
<dt></dt>
自定义列表中的大哥(名词或术语)
<dd></dd>
自定义列表中的弟弟(解释和描述)
dl中 只能放dt标签和dd标签 不能放其他任何文字或标签
dt dd的数量都是没有限制的
3).表单标签
为了收集用户信息,和用户进行交互、收集用户资料
表单的组成:
1.表单域
将表单里的信息提交给服务器
来定义表单域 表单域就是form,form就是表单域
常用属性:
2.表单控件(表单元素)
1.input输入表单元素
<input type="属性值" />
单标签 属性值代表不同种类的输入字段
以上每一种属性代表不同种类的输入框,是关于输入框种类的属性
button 属性的value值在按钮的按键上
其他的都是展现出输入框或者按钮框
name和value是该输入框的基本属性,每一个表单元素都要定义的属性
name 表示该输入框的代号 (单选按钮和复选按钮一定要有相同name值)
value 初始化该输入框或者提供后台人员使用
checked 表示初始化选定按钮 (页面一打开就默认勾选)
<input type="属性值" checked="checked" />
maxlength 表示规定输入框的字符数
所有代码都要写在表单域里
2.label标签
也就是一个定位、标注的标签,可以将输入光标自动对焦到标签内的元素上。
和上面的目录标签(锚点链接)原理是一样的。
<lable for="sex">男</label> <input type="radio" name="sex" id="sex" />
for就是直接跟踪到for指定的id元素上
label里的for → input里的id
3.select下拉表单元素
有多个可选项的下拉列表就用下拉表单
<select></select>
定义下拉表单元素
<option></option>
是每个选项的标签
默认选定状态:
在option里面定义一个selected属性
<option selected="selected"></option>
所有代码都要写在表单域里
4.textarea文本域元素
特大号的文本框,支持多行文本输入,常见于留言板和评论
<textarea></textarea>
定义文本域元素
直接在标签中编辑文字即是对文本框的初始化(和input不一样)
属性:cols 每行显示的字符数
rows 显示的列数
实际开发中不使用这两个属性
所有代码都要写在表单域里
5.查阅信息
w3school:
https://www.w3school.com.cn/
runoob:
https://www.runoob.com/