(浏览器内核不同,所以相同的代码显示出的页面或排版就有差异)
Web标准三层构成
(1)结构:对网页元素进行整理和分类,主要HTML(人的身体)
(2)表现:表现网页元素的版式、颜色、大小等外观样式,CSS(人的着装)
(3)行为:网页模型定义及交互的编写,js(人的行为)
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
标签分为:双标签和单标签(<br />);嵌套关系(head和title)和并列关系(head和body)
lang:指定语言,en:英语;zh-CN:中文
<html lang="zh-CN">
charset:将body内按这个字符集存储。GBK:简体繁体。
<head>
<meta charset=" ">
</head>
语义化目的:
1.方便代码阅读和维护
2.让浏览器或网络爬虫很好解析,更好分析其中内容
3.使用语义化标签具有更好的搜索引擎优化
标题标签:<h1>到<h6>从大到小
段落标签:<p></p>作用分段
水平线标签:<hr />
换行标签:<br />
div和span标签:div是分区的意思;span是范围跨度意思。主要用来装网页元素的
div:用来布局用的,一行只能放一个div(一个div结束会自动换行)
span:用来布局,一行可以有多个span(不会换行)
文本格式化标签
<b></b>:加粗效果。
<strong></strong>:加粗效果。推荐用。有强调意思。
<i></i>:倾斜效果
<em></em>:倾斜效果。强调意思
<s></s>:加删除线
<del></del>:加删除线。强调。
<u></u>:加下划线。
<ins></ins>:加下划线。强调。
标签属性
<标签名 属性1=“属性值1” 属性2=“属性值2”.....> 内容 </标签名>
<手机 颜色=“红色” 大小=“5寸” > </手机>
图像标签img
<img src="图像1" />
属性 | 属性值 | 描述 |
src(必须写) | URL | 图像的路径 |
alt | 文本 | 图像不能显示 |
title | 文本 | 鼠标悬停时显示的内容 |
width | 像素 | 设置图像宽度 |
height | 像素 | 设置图像高度 |
border | 数字 | 设置图像边框的宽度 |
链接标签
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
href:指定链接目标的url地址,(必须有)
target:指定链接页面的打开方式,取值有self和black两种,self是默认值,当前窗口打开,blank:在新窗口中打开。
(ps:外部链接需要添加http:// www.baidu.com
内部链接:直接链接内部页面名称 index.html
没有确定的链接目标:href="#" 代表空链接
)
注释标签
<!-- 注释语句 --> 快捷键 :ctrl+ /
相对路径:
同一级路径:图片引用的时候,直接写图片的名字就行。<img src="baidu.gif">
下一级路径:<img src="images/baidu.gif">
上一级路径:<img src="../images/baidu.gif">
绝对路径:
<img src="C:/......">不提倡使用,因为换个电脑可能就不正确了。
<img src="http://www.......">
瞄点定位:
比如点击目录,能跳转到目录所在的内容行。
<a href="#tree"> 2.圣诞树由来 </a><br /> 目录:
<h2 id="tree" >2.圣诞树由来</h2> 对应内容:
base标签:
设置整体链接的打开状态
<head>
<base target="_blank">
</head>
预格式化文本
<pre> </pre>:在里面写什么效果,显示出来就什么效果。比如换行和空格。
特殊符号
 :空格
创建表格
<table>//表格标签:一个长方形
<tr>//行标签:
<td>单元格内文字</td>
</tr>
</table>
比如:
<table>
<tr> <td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr> <td>小明</td>
<td>男</td>
<td>18</td>
</tr>
</table>
表格属性(加粗默认0)
属性名 | 含义 | 常用属性值 |
border | 设置表格边框(默认border=0 无边框) | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认2) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认1) |
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
align | 设置表格在网页中水平对齐方式 | left center right |
表头:表格的第一行或第一列
<th></th>让表头加粗居中(td改th)
表格标题caption
eg: <table>
<caption>2020年增长情况</caption>
</table>
合并单元格
2种方式:
1.跨行:rowspan=“合并单元格的个数”
2.跨列:colspan=“合并单元格的个数”
合并顺序:先上后下 先左后右
步骤:
1.确定跨行还是跨列
2.找到目标单元格(先上后下 先左后右),写上合并方式和合并单元格的数量
<td rowspan="2">照片</td>
3.删除多余单元格
列表标签
列表用来布局。
无序列表(ul)
无序列表的各个列表项之间没有顺序级别之分,是并列的。
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
有序列表(ol)
<ol>
<li>列表项1</li>
</ol>
自定义列表(围绕着什么来解释说明的)
<dl>
<dt>北京</dt>
<dd>朝阳区</dd>
<dd>海淀区</dd>
</dl>
表单标签
由 表单控件、提示信息、表单域 三种组成。
input控件
<input type="属性值" value="你好"> (input单标签)
属性 | 属性值 | 描述 |
type | text | 单行文本输入框 |
password | 密码输入框 | |
radio | 单选按钮 | |
checkbox | 复选框 | |
button | 普通按钮 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图像形式的提交按钮 | |
file | 文件域(比如:上传文件) | |
name | 由用户自定义 | 控件的名称(通过name把不同表单区分开,name相同只能选1个) |
value | 由用户自定义 | input控件中默认文本值(比如:请输入用户名) |
size | 正整数 | input控件在页面中的显示宽度 |
check属性:默认选中状态。常见于单选按钮和复选按钮。
<input type=" " check="checked">
label标签:
作用:绑定一个表单元素。点击用户名,光标定位到输入用户名,点击输入用户名的框也可以移到输入用户名。
怎么绑定元素?
(1)label标签直接包括input表单
<label>用户名: <input type="radio" name="username" value="请输入用户名"> </label>
(2)for和id来控制
<label for="nc">昵称:</label> <input type ="text" id="nc"/>
textarea控件(文本域)
应用:比如评论
<textarea cols="每行的字符数" rows="显示的行数">
文本内容
</textarea>
实际开发不用。通过css
select下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
</select>
<option selected="selected">为默认选中项,实际开发用的比较少。select优缺点,不同浏览器中显示的效果不一样。而且程序员改不了。
form表单域
通过form表单域将用户信息传递给服务器。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
action:用来指定接收并处理表单数据的服务器程序的url地址。
method:get/post,设置表单数据的提交方式
name:名称,用来指定表单的名称,以区分同一个页面的多个表单