Html和Css
第一章-HTML入门
1.1 HTML介绍
什么是html
超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言，是网页制作所必备的。
超文本：功能比文本强大, 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 语法由标签组成
学习HTML的核心是标签
1.2 HTML结构和基本语法
HTML的结构
-
文档结构介绍：
- 文档声明：用于声明当前HTML的版本，这里的
是HTML5的声明 - html根标签：除文档声明以外，其它内容全部要放在根标签html内部
- 文档头部配置：head标签，是当前页面的配置信息，外部引入文件, 例如网页标签、字符集等
- 文档显示内容：body标签，里边的内容会显示到浏览器页面上
- 文档声明：用于声明当前HTML的版本，这里的
HTML语法规范
-
扩展名是html或者htm
-
html标签不区分大小写
-
html由头(head)和体(body)组成
-
标签是可以嵌套的,标签里面可以放标签
-
标签一般由起始标签开始，结束标签终止(成对出现)。但是如果标签不修饰内容，可以在标签里结束.
-
<标签名/> 空标签
标签属性
-
属性是属于标签的，修饰标签，让标签有更多的效果
-
属性一般定义在起始标签里面。
-
属性一般以 属性名=属性值的形式存在
-
属性值一般用
''或者“ ”括起来。 不加引号也是可以的.(不建议使用)
1.3 HTML在Java中创建
使用idea创建JavaScript项目
-
File -> new -> Module
-
选择JavaScript
-
设置Module的名称
创建html文件
-
在JavaScript项目上右键 -> New -> Html File
-
设置HTML文件名称
编写HTML代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_快速入门title>
head>
<body>
<font color="red" size="5" face="微软雅黑">hello world...font>
body>
html>
使用浏览器访问
-
把鼠标移动到右上角，会浮动出来浏览器按钮，点击“Chrome”按钮，使用Chrome浏览器打开当前网页
-
在浏览器上看到效果
第二章-HTML常用的标签
文本排版标签
- 标题标签
<hn>hn> n取值1~6
- 段落标签 段落之间自动进行换行
<p>p>
- 粗体标签
<b>b>
- 斜体标签
<i>i>
- 换行标签
<br/>
- 下划线标签
<hr/>
图片标签
- 图片的格式有很多种，例如：
.jpg,.jpeg,.png,.gif等等 - 在html里，所有图片都使用标签
- img标签中的img其实是英文image的缩写, img标签的作用, 就是告诉浏览器我们需要显示一张图片
语法:
<img src="图片路径" width="宽" height="高" alt="图片描述" title="用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容"/>
- 示例代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_图片标签title>
head>
<body>
<img src="../img/b.jpg" width="200px" height="200px" title="美女" alt="美女.jpg"><br/>
<img src="../img/a.gif" width="200px" height="200px" title="靓女" alt="靓女.jpg">
body>
html>
路径问题
- 绝对路径:以盘符开始的完整路径
- 相对路径:相对当前的html文件路径 …/ 表示上一层路径 ./表示当前路径
- 绝对路径注意点:
- 路径中不要出现中文, 否则可能出现未知问题
- IDEA不能直接访问, 进入磁盘之后再访问是可以的
列表标签
无序列表
- 语法
- 需要显示的条目内容
...
- 示例代码
<ul type="square">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
-
注意点
ul标签和li标签是一个整体,一般情况下ul标签和li标签都是一起出现, 不会单个出现.
li要定义在ul里面
-
应用场景
新闻列表
商品列表
导航条,菜单
有序列表
- 语法
有序列表 ol
start属性: 起始的索引(默认是第1个)
type属性: 列表类型; 1: 阿拉伯数字; a: 小写的英文字母; A:大写的英文字母; i: 小写的罗马数字; I:大写的罗马数字
- 示例代码
<ol start="1" type="1">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ol>
超链接标签
- 超链接标签的作用: 就是用于控制页面与页面(服务器资源)之间跳转的
超链接标签的格式:
需要展现给用户查看的内容
target属性取值:
_blank：新起页面
_self：当前页面（默认）
- 示例代码
<a href="http://www.baidu.com" target="_self">百度a>
<a href="../案例一信息展示案例/index.html">案例一信息展示页面a>
假链接
就是点击之后不会跳转的链接我们称之为假链接.在企业开发前期, 其它界面都没有写出来, 那么我们就不知道应该跳转到什么地方, 所以就只能使用假链接来代替. 当项目后期其它界面都已经完成时再将假链接体会为真链接
<a href="#">这是一个假链接a>
表格标签
- 表格：由
标签定义；
- 行：每个表格里有若干行
； - 单元格：每行被分割为若干单元格
。 - 单元格里可以包含文本、图片、列表、段落、表单、水平线、表格等
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_表格标签title> head> <body> <table border="1" width="50%" align="center" > <caption>学生信息表caption> <tr> <th>学号th> <th>姓名th> <th>性别th> <th>学科th> <th>总成绩th> tr> <tr align="center"> <td>1td> <td>张三td> <td>男td> <td>javatd> <td>100td> tr> <tr align="center"> <td>2td> <td>李四td> <td>女td> <td>javatd> <td>90td> tr> <tr align="center"> <td>2td> <td>李四td> <td>女td> <td>javatd> <td>90td> tr> <tr align="center"> <td>2td> <td>李四td> <td>女td> <td>javatd> <td>90td> tr> table> body> html>单元格合并
- 删除要合并的格子, 只留一个(最前方的那一个)
- 如果是行合并设置rowspan, 如果是列合并设置colspan, 几个合并 值就是几
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_ 单元格合并title> head> <body> <table border="1" width="50%" align="center"> <tr> <td>1td> <td>2td> <td>3td> <td>4td> <td rowspan="3">5td> <td>6td> <td>7td> <td>8td> tr> <tr> <td colspan="2">9td> <td>11td> <td>12td> <td>14td> <td>15td> <td>16td> tr> <tr> <td>17td> <td>18td> <td colspan="2" rowspan="2">19td> <td>22td> <td>23td> <td>24td> tr> <tr> <td>25td> <td>26td> <td>29td> <td>30td> <td>31td> <td>32td> tr> table> body> html>表格容易错的地方
<table> <tr>tr> table> <table> <tr> <td>td> <td>td> <td>td> tr> <tr> <td>td> <td>td> <td>td> tr> <tr> <td>td> <td>td> tr> table> <table> 111 <tr> 222 <td> 333 td> tr> table>表单标签
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_表单标签元素title> head> <body> <form> 隐藏属性:<input type="hidden" value="1"><br/> 用户名:<input type="text"><br/> 密码:<input type="password"><br/> 性别:<input type="radio">男 <input type="radio">女<br/> 爱好:<input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">看电影 <input type="checkbox">敲代码<br/> 图像:<input type="file"><br/> 籍贯:<select> <option>深圳option> <option>广州option> <option>东莞option> <option>惠州option> select><br/> 自我介绍:<br/> <textarea cols="20px" rows="15px"> textarea> <br/> <input type="submit"> <input type="reset"> <input type="button" value="空白按钮"> form> body> html>form表单通用属性name和value【重点】
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_form表单通用属性name和valuetitle> head> <body> <form> 隐藏属性:<input type="hidden" value="1"><br/> 用户名:<input type="text" name="username"><br/> 密码:<input type="password" name="password"><br/> 性别:<input type="radio" name="sex" value="boy">男 <input type="radio" name="sex" value="girl">女<br/> 爱好:<input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="film">看电影 <input type="checkbox" name="hobby" value="code">敲代码<br/> 图像:<input type="file" name="fileName"><br/> 籍贯:<select name="jiGuan"> <option value="sz">深圳option> <option value="gz">广州option> <option value="dg">东莞option> <option value="hz">惠州option> select><br/> 自我介绍:<br/> <textarea cols="20px" rows="15px" name="text"> textarea> <br/> <input type="submit"> <input type="reset"> <input type="button" value="空白按钮"> form> body> html>form表单标签的action和method属性
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03_form表单标签的action和method属性title> head> <body> <form action="#" method="post"> 隐藏属性:<input type="hidden" value="1"><br/> 用户名:<input type="text" name="username"><br/> 密码:<input type="password" name="password"><br/> 性别:<input type="radio" name="sex" value="boy">男 <input type="radio" name="sex" value="girl">女<br/> 爱好:<input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="film">看电影 <input type="checkbox" name="hobby" value="code">敲代码<br/> 图像:<input type="file" name="fileName"><br/> 籍贯:<select name="jiGuan"> <option value="sz">深圳option> <option value="gz">广州option> <option value="dg">东莞option> <option value="hz">惠州option> select><br/> 自我介绍:<br/> <textarea cols="20px" rows="15px" name="text"> textarea> <br/> <input type="submit"> <input type="reset"> <input type="button" value="空白按钮"> form> body> html>设置表单元素的默认值【重点】
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04_设置表单元素的默认值title> head> <body> <form action="#" method="post"> 隐藏属性:<input type="hidden" value="1"><br/> 用户名:<input type="text" name="username" value="admin"><br/> 密码:<input type="password" name="password" value="123456"><br/> 性别:<input type="radio" name="sex" value="boy" checked="checked">男 <input type="radio" name="sex" value="girl">女<br/> 爱好:<input type="checkbox" name="hobby" value="basketball" checked="checked">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="film">看电影 <input type="checkbox" name="hobby" value="code" checked="checked">敲代码<br/> 图像:<input type="file" name="fileName"><br/> 籍贯:<select name="jiGuan"> <option value="sz">深圳option> <option value="gz">广州option> <option value="dg" selected="selected">东莞option> <option value="hz">惠州option> select><br/> 自我介绍:<br/> <textarea cols="20px" rows="15px" name="text">I like Java...textarea> <br/> <input type="submit"> <input type="reset"> <input type="button" value="空白按钮"> form> body> html>input标签的type属性扩展
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05_扩展title> head> <body> <form> <input type="color"/> <br/> <input type="date"> <br/> <input type="email"> form> <hr/> <form> 用户名: <input type="text" placeholder="请输入用户名"/> <br/> 密码: <input type="password" placeholder="请输入密码"/> form> body> html>- 表单元素标签一定要设置name属性,否则无法提交数据到服务器
扩展-html标签
1.媒体标签
音频标签
audio-
：用于播放声音，比如音乐或其他音频流，是 HTML 5 的新标签。 -
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息
-
常用属性有
属性名 取值 默认值 描述 srcURL 音频资源的路径 autoplayautoplayautoplay音频准备就绪后自动播放 controlscontrolscontrols显示控件，比如播放按钮。 looplooploop表示循环播放 preloadpreloadpreload音频在页面加载时进行预加载。
如果使用 “autoplay”，则忽略该属性。DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_音频标签audiotitle> head> <body> <audio src="../audio/b.mp3" controls="controls">audio> body> html>视频标签
video-
标签用于播放视频，比如电影片段或其他视频流，是 HTML 5 的新标签。 -
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息
-
常用属性
属性名 取值 默认值 描述 srcURL 要播放的视频的 URL。 width设置视频播放器的宽度。 height设置视频播放器的高度。 autoplayautoplayautoplay视频在就绪后自动播放。 controlscontrolscontrols显示控件，比如播放按钮。 looplooploop如果出现该属性，则当媒介文件完成播放后再次开始播放。 preloadpreloadpreload视频在页面加载时进行加载。
如果使用 “autoplay”，则忽略该属性。mutedmutedmuted规定视频的音频输出应该被静音。 posterURL 视频下载时显示的图像，或者视频播放前显示的图像。 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_视频标签videotitle> head> <body> <video src="../audio/a.mp4" controls="controls">video> body> html>2.回到顶部
锚一般指船锚，是锚泊设备的主要部件。铁制的停船器具，用铁链连在船上，把锚抛在水底，可以使船停稳。
在html里面锚点的作用: 通过a标签跳转到指定的位置.
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <a id="aId">a> <p>111p> <p>111p> <p>111p> <p>111p> <p>111p> <p>111p> <p>111p> <p>111p> <p>111p> <p>111p> <p>111p> <p>111p> <p>111p> <img src="../img/banner_1.jpg" width="500px" height="2000px"/> <p>111p> <p>111p> <p>111p> <p>111p> <p>111p> <a href="#aId">回到顶部a> body> html>3.图片链接
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <a href="http://www.baidu.com"> <img src="../img/b.jpg"/><br/> 百度 a> body> html>4.详情和概要标签
利用summary标签来描述概要信息, 利用details标签来描述详情信息. 默认情况下是折叠展示, 想看见详情必须点击
<details> <summary>概要信息summary> 详情信息 details>5.HTML5中新增的type类型
注：不同的浏览器支持上有差异，有些浏览器依然不支持
6.placeholder:用户提示
第三章-CSS入门
3.1 div和span
什么是div和span
div是html里面的一个标签
. 没有特定的含义, 作为容器. 一般用于配合css完成网页的基本布局, span也是一个标签
,没有特定含义,一般作为文本容器div和span的区别
- div 就是一个标签. 是一个容器, 块级元素(自动换行), div内部可以放任何标签(body,html等不行)
- span就是一个标签. 是一个容器, 行内元素(不换行), span标签中只能嵌套文本/图片/超链接
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_div和spantitle> head> <body> <div>div一div> <div>div二div> <span>span1span> <span>span2span> body> html>3.2 CSS介绍
什么是CSS
- 层叠样式表
- 层叠: 样式层层叠加 eg:刷墙
- 样式表: 样式的集合
学习html就是学习标签, 学习CSS主要学习样式(属性),选择器
CSS的作用
- 美化页面,修饰页面
- HTML负责内容(hello),CSS负责样式(颜色,字体大小…)
<font color="red" size="7">hellofont>- html当做毛坯房, CSS当做装修
**为什么要学习CSS **
-
为了解决一些样式的问题, font标签的字体不能比1还小不能比7还大, 超链接标签的下划线去不掉, 大量进行嵌套来设置样式(eg: 段落里面嵌套font, 在font里面再设置color属性)
-
通过标签来修改样式的缺点:
1.需要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果
2.当需求变更时我们需要修改大量的代码才能满足现有的需求
-
所以在企业开发中修改样式都是交给CSS来做,通过CSS来修改样式的好处:
1.不用记忆哪些属性属于哪个标签
2.当需求变更时我们不需要修改大量的代码就可以满足需求
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_CSS概述和体验title> <style> font[color]{ color: blue; } font[size]{ font-size: 100px; } a,font{ text-decoration: line-through; } p{ color: red; } div{ border: 1px red dashed; } style> head> <body> <div> div div> <font color="red">字体标签font> <font color="red">字体标签font> <font color="red">字体标签font> <font color="red">字体标签font> <font color="red">字体标签font> <font color="red">字体标签font> <br/> <font size="7">字体font> <br/> <a href="#">百度a> <br/> <p>段落p> body> html>CSS语法
选择器{ 属性:属性值 属性值; ... 属性:属性值 属性值 }注意
- 属性和属性值用:连接
- 如果有多个属性值用空格隔开
- 如果有多个属性,属性和属性之间用;隔开 最后一个;可以不写
第四章-CSS进阶
4.1 CSS引入方式
概述
- HTML是一种语言；CSS也是一种语言。如果想要CSS能够修饰HTML的样式，就必须把CSS引入到HTML中。即：要解决 把CSS代码写在什么地方 的问题
- 引入的方式有：
- 内联样式：把CSS代码内嵌到HTML代码里,通过标签的style属性来结合
- 内部样式：把CSS代码写在HTML文档内部,通过style标签来结合
- 外部样式：把CSS代码写在独立的CSS文件里,通过link标签结合
通过标签的style属性来结合
<p style="属性名称:属性值;...">p>通过style标签来结合
<head> <style type="text/css"> 标签名称{ 属性名称: 属性对应的值; } style> head> 注意点: 1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系) 2.style标签中的type属性其实可以不用写, 默认就是type="text/css" 3.设置样式时必须按照固定的格式来设置. key: value; 其中:不能省略, 分号大多数情况下也不能省略通过link标签结合
- 创建一个css文件(后缀是css)
- 通过link标签引入
<head> <link rel="stylesheet" href="../../css/myCss.css" /> head> link标签属性: - href:css文件路径 - rel: stylesheet 必须要有,否则引入的样式无法使用三种结合方式优先级
就近原则(相对于代码,也就是要修饰的标签)
4.2 CSS基本选择器
基本选择器语法
选择器 描述 语法 示例 标签选择器 根据HTML标签名称选择标签 标签名称{}div{ color:red; }ID选择器 根据id属性值选择标签 #id值{}#d1 { color:blue; }类选择器 根据class属性值（类名）选择标签 .类名{}.c1 { color:yellow; }通用选择器 选取所有标签 *{}*{ color: pink;}DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_css的基本选择器title> <style> font{ color: red; } #pId{ color: blue; } .c1{ color: green; } *{ color: blueviolet; } style> head> <body> <font>字体标签1font> <font>字体标签2font> <font>字体标签3font> <font class="c1">字体标签4font> <p id="pId">段落1p> <p>段落2p> <p>段落11p> <p class="c1">段落22p> <p class="c1">段落33p> <p>段落44p> body> html>优先级
选择器优先级
- ID选择器 > 类选择器 > 标签选择器 > 通用选择器
- 如果优先级相同，那么就满足就近原则
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03_基本选择器的优先级title> <style> /*#d1{ color: red; }*/ /* .c1{ color: green; }*/ p{ color: blue; } *{ color: yellow; } style> head> <body> <p class="c1" id="d1">段落p> body> html>4.3 CSS扩展选择器
组合选择器
- 多个基本选择器的组合，可以更灵活的选取标签
选择器 描述 语法 示例 层级选择器 根据HTML标签名称选择标签 祖先 后代div a{ }属性选择器 根据指定属性的值筛选元素 [属性='值']input[type='text'] { }并集选择器 多个选择器的结果进行合并 选择器1,选择器2,....c1, span { }DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_css的组合选择器title> <style> div font{ color: red; } p font{ color: green; } input[type='text']{ background-color: red; } #divId,span{ color: blue; } style> head> <body> <div> <font>字体标签1---红色font> <p> <font>字体标签2----绿色font> p> div> <font>字体标签3font> <hr/> <form> 用户名:<input type="text"><br/> 密码:<input type="password"> form> <hr/> <div id="divId">divdiv> <span>spanspan> body> html>伪类选择器
- 了解几个超链接相关的伪类选择器
选择器 描述 示例 :link选择正常状态的超链接 a:link{}:visited选择被访问过的超链接 a:visited{}:hover选择鼠标悬停的超链接 a:hover{}:active选择鼠标按下的超链接 a:active{}DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_伪类选择器【了解】title> <style> a:link {color: red} /* 未访问的链接 */ a:visited {color: green} /* 已访问的链接 */ a:hover {color: blue} /* 鼠标移动到链接上 */ a:active {color: yellow} /* 选定的链接 */ style> head> <body> <a href="#">百度a> body> html>4.4 CSS常用属性
背景属性
介绍
功能 属性名 属性取值 背景色 background-color1. 颜色常量，如：red
2. 使用十六进制，如：#ABC
3. 红绿蓝 使用 rgb(红,绿,蓝)背景图片 background-imageurl(图片的路径)平铺方式 background-repeatrepeat默认。背景图像将在垂直方向和水平方向重复repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat背景图像将仅显示一次。背景位置 background-positionleft top 示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS常用属性-背景title> <style> /*设置整个页面的背景样式*/ body{ /*背景图片*/ background-image: url("img/little_mm.jpg"); /*平铺方式*/ background-repeat: repeat; } style> head> <body> <div>页面内容div> body> html>文本样式
介绍
功能 属性名 属性取值 颜色 color颜色 设置行高 line-height像素 文字修饰 text-decorationunderline下划线
overline上划线line-through删除线none不要线条文本缩进 text-indent用于缩进文本，可以使用em单位。 文本对齐 text-alignleft把文本排列到左边。right把文本排列到右边。center把文本排列到中间。
默认值：由浏览器决定。示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS常用属性-文本title> <style> p{ /*首行缩进：2个字符*/ text-indent: 2em; /*文字颜色：绿色*/ color: green; } a{ /*超链接 不显示下划线*/ text-decoration: none; } style> head> <body> <p> 文本内容<a herf=“#”>百度a> p> body> html>字体属性
介绍
功能 属性名 作用 字体名 font-family设置字体，本机必须要有这种字体 设置大小 font-size像素 设置样式 font-styleitalic斜体normal默认值。浏览器显示一个标准的字体样式。设置粗细 font-weightbolder加粗示例
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS常用属性-字体title> <style> span{ /*字体：幼圆*/ font-family: 幼圆; /*大小：40px*/ font-size: 40px; /*字体：斜体*/ font-style: italic; /*加粗显示*/ font-weight: bolder; } style> head> <body> <span>你好，靓仔span> body> html>总结
- 能够使用h1~h6、hr、p、br 等与文本有关的标签 hn: 标题标签 n:1-6 hr: 下划线 p: 段落 br; 换行 b:加粗 i:斜体 - 能够使用有序列表ul-li和无序列表ol-li显示列表内容 ul-li: 无序列表 type属性 ol-li: 有序列表 type属性 start属性 - 能够使用图片img标签把图片显示在页面中 img: src属性,width属性,height属性(像素,百分比),title,alt - 能够使用超链接a标签跳转到一个新页面 a: href属性 target属性 - 能够使用table、tr、td标签定义表格 table: 表格 border边框 width宽 height高 align对齐方式 tr; 行 align对齐方式 td; 列 colspan rowspan 合并单元格 align对齐方式 - 能够使用表单form标签创建表单 <form>input select textarea</form> - 能够使用表单中常用的input标签创建输入项 type属性:text,password,radio,CheckBox,file,submit,reset,hidden,date,color... 一定要设置name属性,否则无法提交数据到服务器 - 能够使用表单select标签定义下拉选择输入项 option - 能够使用表单textarea标签定义文本域 rows cols 属性,设置行和列 - 能够使用CSS的基本选择器选择元素 标签选择器\类选择器\id选择器\通用选择器 选择器{ 属性名:属性值 属性值; .... } - 能够使用常见的CSS属性 背景属性 文本样式 字体属性你可能感兴趣的:(后端学习,html,css,前端)
- 行：每个表格里有若干行