html&css

最新推荐文章于 2022-04-20 14:26:15 发布

bobob_

最新推荐文章于 2022-04-20 14:26:15 发布

阅读量222

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/dubo_csdn/article/details/86712988

版权

web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、HTML部分

目录内容

【1】html规范【2】html操作思想【3】字体,h1-h6,水平线、空格标签【4】列表标签

【5】图形标签【6】超链接标签【7】表格标签【8】表单标签【9】其他标签【10】注册表单案例

【11】CSS 与 html结合方式【12】CSS 选择器

【html规范】

最外层标签<html></html>
<html></html> 内部有两大基本组成部分：<head></head> 和 <body></body>
书写标签，有开始标签有结束标签，如 <font> 内容 </font>
标签书写，不区分大小写，如：<Font></fonT>也是没问题的，但是不建议这样写，大小写要统一
特殊标签(自闭合标签)，如：换行标签 <br/>，这类标签，一般是不需要书写内容的标签

【html操作思想】

数据放在 开始标签 和 结束标签 之间,标签作为容器将数据包围，不同的显示效果使用不同的标签属性，或者使用不同的标签。

【字体,h1-h6,水平线、空格标签】

字体标签：

<font color="red" size="5" >

内容

</font>

举例:

0: 字体color 红色，大小size="-10"
1: 字体color 红色，大小size="1"
2: 字体color 红色 :red，大小size="2"
3: 字体color :绿色#4cf38f，大小size="7"
4: 字体color 灰色 :rgb(166,172,181)，大小size="21"

<H1>标签至<H6>标签比较

H1H1H1H1H1H1H1H1

H2H2H2H2H2H2H2H2

H3H3H3H3H3H3H3H3

H4H4H4H4H4H4H4H4

H5H5H5H5H5H5H5H5

H6H6H6H6H6H6H6H6

水平线标签 <hr/>

color 红色，size 为 -100、-10、1、2

color 绿色，size 7、21、100 ...

~~可以试一试size="1000"这种更大的~~

空格标签  

用来输出空格的特殊字符串，类似的还有小于号<使用 < ,大于号> 使用>

【列表(普通、有序、无序)标签】

普通列表

著名品牌汽车

夏利：您的首选

奇瑞：开开试试

有序列表 type属性依次为：1、a、A、i、I、disc、circle、spuare

数字1
数字2
数字3

英文字母a
英文字母a
英文字母a

英文字母A
英文字母A
英文字母A

罗马数字i
罗马数字i
罗马数字i

罗马数字I
罗马数字I
罗马数字I

~~下面的属于无序列表的严格定义范畴~~

实心圆 disc
实心圆 disc
实心圆 disc

圆圈 circle
圆圈 circle
圆圈 circle

方块 "square"
方块 "square"
方块 "square"

无序列表 type属性依次为：1、a、A、i、I、disc、circle、spuare

实心圆 disc
实心圆 disc
实心圆 disc

圆圈 circle
圆圈 circle
圆圈 circle

方块 "square"
方块 "square"
方块 "square"

~~下面的属于有序列表的严格定义范畴~~

数字1
数字2
数字3

英文字母a
英文字母a
英文字母a

英文字母A
英文字母A
英文字母A

罗马数字i
罗马数字i
罗马数字i

罗马数字I
罗马数字I
罗马数字I

【图形标签<img src="img-path" >】

【超链接标签<a>】

写法：

<a href="http://www.baidu.com">去百度</a>
target="new":去百度
target="_blank":去百度
target="_self":去百度

【表格标签】

	<table border="1" cellpadding="20" cellspacing="0" bordercolor=green>
		<tr align="left">
			<td align="right">数据1</td><td>数据1</td><td>数据1</td>
		</tr>
		<tr align="center">
			<td>数据2</td><td>数据2</td><td>数据2</td>
		</tr>
		<tr align="right">
			<td>数据3</td><td colspan="2" >数据3</td>
		</tr>
	</table>

其中，cellpadding属性作用是设置td内容和td边框的距离;cellspacing属性设置td域td之间的间距空隙;colspan合并列,rowspan合并列;
align为内容对其方式，可用在tr标签和td标签之上。

数据1	数据1	数据1
数据2	数据2	数据1
数据3	数据3

【表单标签】

表单开始

用户名[ input type="text" name="username" ]：

密码输入框 [ input type="password" name="password" ]：

单选按钮组 [ input type="radio" name="sex" value="0" ]（注意：同一组单选按钮要有相同的name属性值，要有value属性）：
男女
文件上传项，专门用于选择本地文件，将文件上传到服务器上，后面学习文件上传时会用到

下拉列表选项，在select标签上写name属性，子标签option上写value属性

复选按钮[ input type="checkbox" name="love" value="lan"]（要有name属性，同一组选项，name属性值要相同，要有value值）
篮球篮球篮球
文本域输入项 cols属性为列数，rows为行数，使用cols和rows设置文本域的显示大小

表单提交按钮 value值为按钮显示内容 [ input type="submit" value="muSubmitBut"]

重置表单按钮，是将表单还原到刚开始的初始化状态 [input type="reset" value="初始化表单"]

注意：

0、表单输入项标签都需要写name属性，不然提交不了数据
1、单选radio、复选checkbox 和 select下拉列表选项对应的标签都需要写value属性，不然得到的value值为 on
2、表单重置按钮的供嫩是L初始化表单，不是清空表单数据

【其他标签】

pre标签：原样输出

		文   字  之  间  有  空  格

p 段落标签

文字段落

s 删除线标签

~~文字删除线~~

u 下划线标签

文字下划线

b 加粗标签

文字加粗效果

i 斜体标签

文字斜体效果

div 标签（换行）

div1

div2

span 标签（一行）

span1span2

【注册案例】

在写该表单的时候，使用了table表格标签来嵌套，建议大家把bordr设置为1，
可以看清楚表格结构，写完了再将border改为0

注册表单开始：

	<form action="" method="get">
		<h2>免费开通黑马账号</h2>
		<table cellpadding="7" cellspacing="0" border="0">
			<tr>
				<td>注册邮箱：</td>
				<td><input type="text" name="email"></td>
			</tr>
			<tr>
				<td> </td>
				<td>使用手机号或者账号注册</td>
			</tr>
			<tr>
				<td>创建密码：</td>
				<td><input type="password" name="password"></td>
			</tr>
			<tr>
				<td>真实姓名：</td>
				<td><input type="text" name="realname"></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td>
					<input type="radio" name="sex" value="0">女 
					<input type="radio" name="sex" value="1">男
				</td>
			</tr>
			<tr>
				<td>爱好：</td>
				<td>
					<input type="checkbox" name="love" value="lq">篮球 
					<input type="checkbox" name="love" value="zq">足球 
					<input type="checkbox" name="love" value="ppq">乒乓球
				</td>
			</tr>
			<tr>
				<td>生日：</td>
				<td>
					<select name="year">
						<option value="1989">1989</option>
						<option value="1990">1990</option>
					</select>年
					<select name="month">
						<option value="5">5</option>
						<option value="6">6</option>
					</select>月
					<select name="day">
						<option value="29">29</option>
						<option value="30">30</option>
					</select>日
				</td>
			</tr>
			<tr>
				<td> </td>
				<td>
					<img alt="" src="imgs/code.png"><a href="#">看不行,换一张</a>
				</td>
			</tr>
			<tr>
				<td>验证码：</td>
				<td><input type="text" name="code"></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="image" src="imgs/subBut.png">
				</td>
			</tr>
			
		</table>
	</form>

免费开通黑马账号

注册邮箱：
	使用手机号或者账号注册
创建密码：
真实姓名：
性别：	女男
爱好：	篮球足球乒乓球
生日：

年月

日
	看不行,换一张
验证码：

二、CSS部分

【css与html结合方式】

1、在标签的属性位置: style="color:red"

使用标签的style属性设置字体样式

2、使用标签 <style type="text/css" > css代码 </style>

3、引入外部的css文件,在css文件中写css的样式代码 <link style="text/css" rel="stylesheet" href="css_file_url" />

【css 选择器】

css优先级
后加载的起作用：

效果：

就近原则：

效果：

css 选择器

选择器学习的是一个写法，规则，是一种格式。

基本选择器(三个)

格式：
标签名称{
	//css代码
}
如：
div{
	background-color:red;
}

格式(className是标签的class属性的值)：
. className{
	//css代码
}
如：
<div class="myDIV">内容</div>
.myDIV{
	background-color:red;
}

格式(divId是标签的id属性的值)：
#id属性值{
	//css代码
}
#divId{
	background-color:red;
}

标签选择器
class(标签的class属性)类选择器
id(标签的id属性)选择器

选择器优先级

id选择器 > 类选择器 > 标签选择器

bobob_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html&css

一、HTML部分目录内容【1】html规范【2】html操作思想【3】字体,h1-h6,水平线、空格标签【4】列表标签【5】图形标签【6】超链接标签【7】表格标签【8】表单标签【9】其他标签【10】注册表单案例【11】CSS 与 html结合方式【12】CSS 选择器【html规范】最外层标签&lt;html&gt;...
复制链接

扫一扫