格式
<!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标签内的直接
属性选择器
通过元素属性进行二次过滤
元素[属性名=属性值]
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
