格式
<!DOCTYPE html>
<!--Html5的文档声明-->
<html lang="en">
<!--根标签,有且只能有一个-->
<head><!--头标签-->
<meta charset="UTF-8">
<!--设置字符集-->
<title>Title</title>
<!--文档标题,显示在浏览器标签上-->
</head>
<body>
<!--网页主体-->
<!--使用marquee标签 完成文字的滚动效果-->
<marquee>他从北方来,一骑白马,满面风霜</marquee>
</body>
</html>
标签
图片标签
src属性:图片路径
width属性:图片宽度
height属性:图片高度
宽变高也变,宽变高变各自变
title属性:鼠标悬浮在图标时显示的文本内容
alt属性:图片未加载出来时显示的文本内容
<body>
<img src="img/a.jpg" alt="猫爬架的照片" height=" 300">
</body>
超链接标签
href 属性:指向的网址
target 属性:
_blank:打开一个新网页
_self:在原基础上打开网页
<body>
<a href="https://blog.csdn.net/qq_40892118?spm=1000.2115.3001.5343" target="_blank">CSDN空间</a>
</body>
列表标签
ol li:有序列表
ul li:无序列表
<body>
<ol>
<li>红楼梦</li>
<li>三国演义</li>
<li>西游记</li>
<li>水浒传</li>
</ol>
<ul>
<li>红楼梦</li>
<li>三国演义</li>
<li>西游记</li>
<li>水浒传</li>
</ul>
</body>
表格标签
bgcolor属性:背景颜色
border属性:边框
width属性:宽
cellspacing属性:元素与
cellpadding属性:元素和
align 属性:
left:左对齐
right:右对齐
center:居中
rowspan:占几行
colspan:占几列
标签:
table:表格
tr:行
td:列,表头中td一般写
thead:表头
tbody:表格
快捷生成表格:
table+:一行一列
table>tr*m>td*n能够快速建立m行n列的表格
<table border="" cellspacing="0" cellpadding="10" align="center" width="">
<thead bgcolor="#ff8c00">
<tr>
<th rowspan="2">姓名</th>
<th rowspan="2">姓别</th>
<th rowspan="2">年龄</th>
<th rowspan="2">生日</th>
<th colspan="2">爱好</th>
</tr>
<tr>
<th>电子游戏</th>
<th>毛茸茸</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>杨晨</td>
<td>男</td>
<td>23</td>
<td>1998-01-02</td>
<td>Alan Wake</td>
<td>Cat</td>
</tr>
</tbody>
</table>
姓名 | 姓别 | 年龄 | 生日 | 爱好 | |
---|---|---|---|---|---|
电子游戏 | 毛茸茸 | ||||
杨晨 | 男 | 23 | 1998-01-02 | Alan Wake | Cat |
换行标签
单标签br
表单标签
form:表单标签
<input>标签:典型的表单数据标签,接收用户数据,最后传给java后台代码
type:是input最重要的属性,规定了该input的功能
可选值:
1.text 文本框
2.password 密码框(在学习期间,我们一般不用密码框,都用文本框代替)
3.date 日期框,会自动生成日期组件
4.radio 单选框 注意,一组单选框应该有相同的name属性值
5.checkbox 复选框 注意,一组复选框应该有相同的name属性值
6.file 文件域 (目前不考虑,这里只是展示一下)
7.submit 提交按钮
8.reset 复位按钮/重置按钮
<select> + <option>标签:下拉框
select:下拉框
option:下拉框选项
<textarea>标签:文本域标签
form属性:
action:数据提交的位置 ,自己提交给自己,使用#代表地址
当提交表单后,会将数据用?隔离,多个数据会用&分隔
method:数据传输的方法,两种get/post
target:提交表单后,服务器返回的页面出现的位置
form中所有能接收数据的组件都应该有name属性,用户填写的是value(有的组件是直接指定value值,由用户选择的,如单选/多选/下拉)。
组成键值对传给指定的位置
<form action="#" method="get\" target="_blank">
<table border="1" cellspacing="0" align="center">
<tr align="center">
<th colspan="2">注册</th>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>生日</td>
<td>
<input type="date" name="birthday">
</td>
</tr>
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex" value="man">
女<input type="radio" name="sex"value="woman">
</td>
</tr>
<tr>
<td>职业</td>
<td>
骑士<input type="checkbox" name="Knight">
白魔法师<input type="checkbox" name="White magician">
黑魔法师<input type="checkbox" name="Black magician">
龙骑士<input type="checkbox" name="Dargon Knight">
吟游诗人<input type="checkbox" name="Travelling poet">
</td>
</tr>
<tr>
<td>上传头像</td>
<td>
<input type="file">
</td>
</tr>
<tr>
<td>出生地</td>
<td>
<select name="address">
<option value="Sea">利姆萨罗敏萨</option>
<option value="Desert">乌尔达哈</option>
<option value="Forest">格里达尼亚</option>
</select>
</td>
</tr>
<!--个人签名-->
<tr>
<td>个人签名</td>
<td>
<textarea cols="30" rows="4" name="description"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit"> <input type="reset"></td>
</tr>
</table>
</form>
标题标签
<h1>标题</h1>
段落标签
<p></p>
行标签与快标签
块标签:包含p、div、ul、ol、li、dl、dt、dd、h1~h6;
独占一行,对宽高的属性值生效
行内标签:包含a、span、em、strong、img、var;
可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高!
这里,插入介绍一个CSS的属性:
display:显式模式
block:块级显式模式
inline: 行内元素显式模式
inline-block: 行内块元素显式模式
none:不显式
-行内标签:所有元素在一行内,彻底不能指定高宽
-行内块标签:所有元素在一行内,可以指定高宽
类似于div,span这样的标签,没有实际功能,只是用来划定网页区域位置的,结合CSS可以完成网页布局。
CSS
CSS:层叠样式表,提供丰富的页面元素样式,可以根据需求随意修改
基本格式:
在 <head>中书写 <style>标签开始样式,选中要添加样式的元素,对其不同的样式属性进行修改
引入CSS的三种方式
1. 内联样式
在标签中通过 style 属性来控制样式。只能影响当前这一行。
格式:在html标签上,加入style属性即可。
2.内部样式
在<head>标签中通过<style>标签来控制样式。只能影响当前文件。
格式:在 <head>中书写 <style>标签开始样式,选中要添加样式的元素,对其不同的样式属性进行修改
3. 外部样式
引入一个专门描述样式的css文件
格式:在<head>标签中通过<link>标签来引入独立 css 文件。
内联样式优先级最高
内部样式和外部样式,谁写在前边,谁被覆盖
选择器
元素选择器:标签选择器
div{
给所有的div加样式
}
类选择器
配合html的class属性,用.获取不同的类
id选择器
配合html的id属性(注意:id属性是唯一的)用#获取不同的id值
并集选择器
用,分隔多个选择器,样式
层级选择器
a空格b a标签内的所
a>b a标签内的直接
属性选择器
通过元素属性进行二次过滤
元素[属性名=属性值]