1、html概述
(1)什么是html: 是超文本标记语言,是用于开发网页的最基础的语言
(2)html的结构:
文档声明: <!doctype html>
根标签: <html></html>
头部分: <head></head>
体部分: <body></body>
预防网页乱码: <meta charset="utf-8"/>
(3)html的语法
标签: 分为开始标签(<head>)和结束标签(</head>),
如果标签没有内容要包裹, 通常可以写成自闭标签(<img/><br/><hr/>等)
属性: 属性要写在开始标签上, 多个属性之间用空格隔开, 属性值用双引号或单引号引起来
注释: <!-- 注释内容 -->, 浏览器对于html中的注释不会解析, 更不会显示
空格: 使用 或者   代替
换行: 使用 <br/> 标签, 或者用块元素(div/p/h1~h6等)包裹内容
2、html标签
(1)图像标签: <img src="指定图片的地址" alt="代替图片显示的文本" width="图片的宽度" height="图片的高度"/>
(2)超链接标签: <a href="指定点击超链接后将会跳转到的地址" target="_self|_blank">这里可以包裹文本或图片</a>
(3)表格标签:
table: 定义一个表格
tr: 定义表格中的行
td/th: 定义表格中的单元格, th用于定义表头中的单元格,其中的文本默认加粗并居中
table上的html标签属性:
border(边框), cellspacing(指定边框和单元格之间的距离), cellpadding(指定单元格边框和内容之间的距离)
bgcolor(背景颜色), bordercolor(边框颜色), align(设置排列方式,left/center/right)
(4)表单标签:
表单标签的作用: 用于向服务器提交数据, 此外在超链接或者url地址的后面拼接参数也可以向服务器提交数据!
表单标签: <form action="指定表单的提交地址" method="指定提交方式"></form>
(5)表单项标签:
a) 文本输入框: <input type="text" />
b) 密码输入框: <input type="password" />
c) 单选框: <input type="radio" />
d) 多选框: <input type="checkbox" />
e) 按钮: <input type="button"/>
f) 提交按钮: <input type="submit"/>
g) 下拉选框:
<select>
<option>xxx</option>
</select>
h) 多行文本输入框：
<textarea cols="列数/宽度" rows="行数/高度"></textarea>
3、表单项中的细节问题
(1)表单中的数据为什么无法提交?
表单中的表单项要想提交数据, 得有name属性。如果没有name属性，在表单提交时，该项将会被忽略！
(2)单选框无法实现单选?
多个单选框得具有相同的name属性值,只有name属性值相同的单选框,才是一个组,才可以实现单选。
(3)如何实现默认选中某一个单选框或复选框?
<input type="radio" checked="checked"/>男
<input type="checkbox" checked="checked"/>篮球
为单选框或复选框添加一个checked="checked"属性,就可以让单选框或复选框默认被选中
(4)为什么提交单选框或复选框的值为on?
<input name="gender" type="radio" value="male"/>男
<input name="gender" type="radio" value="female"/>女
<input name="like" type="checkbox" value="basketball"/>篮球
...
如果单选框或复选框没有设置value值,当被选中时,提交的值默认都是"on"
如果单选框或复选框设置了value值,当贝选中时,就会提交value值.
(5)如何设置下拉选框中的某一项默认被选中
<select name="city">
<option value="beijing">北京</option>
<option selected="selected">上海</option>
...
</select>
为option标签添加一个selected="selected"属性,就可以让这个option选项默认被选中
(6)option标签上的value值有什么作用
如果option上有value属性,当这个option被选中时,就会提交value属性的值
如果option上没有value属性,当这个option被选中时,就会提交option标签中的文本
4、CSS概述: 什么是css
css：层叠样式表，就是用于修饰、渲染、美化网页的一门语言
使用css美化网页，比用html标签属性设置样式有很多的优势，比如：可以实现代码的复用、可以避免页面结构的混乱、可以实现html代码和css代码的分离，增强网页的展示能力。
5、引入CSS的三种方式：
(1)通过标签上的style属性
<div style="width:200px;..">xxx</div>
通过style属性为当前标签设置css样式。由于这种方式：
a)无法实现代码的复用
b)容易造成页面结构的混乱
c)很难实现css代码和html代码的分离
所以不推荐使用这种方式
(2)通过head标签内部的style标签
这种方式是将所有的css代码集中在一个style标签内部统一管理,初步的实现了将css代码和html代码的分离。也实现了代码的复用。
(3)通过link标签引入外部的css文件
可以将所有的css代码写在一个css文件中，在需要这些代码的html文件中，直接通过link标签引入这个css文件即可！
<link rel="stylesheet" href="css文件的路径"/>
真正的实现了将css代码和html代码的分离。也实现了代码的复用。
推荐使用这种方式.
6、css选择器
(1)标签名选择器
div{ } -- 选中所有的div元素并设置样式
span{ } -- 选中所有的span元素并设置样式
(2)class/类选择器
.c1{ } -- 选中所有class值为c1的元素并为这些元素设置样式
<div class="c1 c2"></div>
<span class="c1"></span>
<p class="c1"></p>
另外,一个标签可以设置多个class属性值(class="c1 c2"),多个class值之间用空格隔开
表示当前标签同时属于多个分组,多个分组设置的样式也会同时作用在这个标签上.
如果是同一级选择器, 为相同的元素设置相同的样式,但是值不相同,此时会使用哪个选择器设置的样式?
写在后面的选择器代码会覆盖前面的选择器代码!
优先级: id选择器>class选择器>元素名选择器
(3)id选择器
#div1{ } -- 选中id值为div1的元素
<div id="div1"></div>
id值在整个html中应该是独一无二的!
(4)后代选择器
span{ } -- 选中当前html中的所有span元素
div span{ } -- 选中div内部的所有span元素
div,span{ } -- 选中当前html中的所有的div元素以及所有的span元素
<div>
<span></span>
</div>
<span></span>
(5)属性选择器 -- 根据元素的属性条件筛选/过滤元素
input[type='text']{ } -- 选中所有type='text'的input元素,也就是文本输入框
input[type='checkbox']{ } -- 选中所有type='checkbox'的input元素,也就是复选框
input[type='radio']{ } -- 选中所有type='checkbox'的input元素,也就是单选框
...
328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
