HTML(超文本标记语言)+CSS(层叠样式表)

最新推荐文章于 2025-08-12 13:43:12 发布

原创最新推荐文章于 2025-08-12 13:43:12 发布 · 1.3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识，包括HTML的常用标签、表格、表单及框架的使用，以及CSS的选择器、样式设置和盒子模型等，帮助初学者快速掌握前端开发的基本技能。

一、HTML

HTML: 超文本标记语言.

“超文本” : 页面中包含图片、链接等非文字内容.
“标记” : 使用标签将需要的内容包括起来。

html模板:

<html> // 根标签
	<head>  // 头标签
		<title>这是标题</title>
	</head>
	<body>  // 体标签
		这里是正文
	</body>
</html>

常用标签:

1.标题标签: <h1> ~ <h6>   自动加粗 , 单独占用一行. 
2.水平线标签: <hr />  (自闭和标签-没有标签体和结束标签)
3.字体标签: <font size="字体大小(默认是3)"  color="字体颜色(#FF0000)"  
4.格式化标签: <b> 粗体  <i> 斜体
5.段落标签: <p> 前后都有一段空白.  <br />:换行 &nbsp; 空格.
6.图片标签: <img src="图片路径" alt="图片不能显示替代的文本." title="图片标题" />
7.列表标签: <ol type="列表类型(A,a,1)" >:有序列表
		   <ul type="符号的类型">:无序列表 <li> 子标签.
8.超链接标签:<a href="要跳转的路径" target="窗口打开位置"> 
							          _self:本窗口打开.(默认)
							          _blank: 新窗口打开.

表格标签:

<table> :父标签.
		border:表格边框宽度.
		cellpadding:文字与边框的距离。
		cellspacing: 单元格之间的距离.
		bgcolor: 表格的背景颜色.
<th> 定义表头,默认居中,加粗.
<tr> 定义行
<td> 定义列	 colspan="2":跨2列  rowspan="2" 跨2行 align="水平对齐方式"

框架标签:

注意: <frameset>和<body>两个不能共存.
<frameset>: 多个窗口页面整合在一起的一个框架集.
       rows(行): 分为上下两部分, 行的数量 , * (其余部分)
       cols(列): 分为左右两部分, 列的数量 , * (其余部分)
<frame>: 单独的一个页面(框架)
       src:页面的路径. 
       name: 页面的名称,用于超链接跳转使用.
       
例:<frameset rows="80,*">  // 分为上下.
		<frame name="top" src="a.html">  //上
		<frameset cols="150,*">  //将下分为左右两部分.
			<frame name="lower_left" src="b.html"> 
			<frame name="lower_right" src="c.html"> 
		</frameset> 
	</frameset>

表单标签:
获取用户输入的数据 --> java服务器 --> 存储到数据库.

<form>表单标签.
	action属性: 请求路径,表单提交到服务器的路径.
	method属性: 请求方式.
		  get: 默认值 , 数据会追加在请求路径上,提交的数据有限.
		  post:不会追加在请求路径上,提交的数据大小不限制.
<input>:输入域标签,获取用户输入的信息.
	type属性: 
		  text:文本框.
		  password:密码框,以●显示.
		  radio:单选框 , name:设置标签名称,同名称的radio标签互斥.
		  submit: 提交按钮.
		  checkbox: 复选框.
		  image:按钮上的图片 ,  相当于提交.
		  file: 文件上传.
		  hidden:隐藏按钮,浏览器不显示.
		  button:普通按钮,配合js使用.
    name属性: 元素名,服务器通过属性获取提交的数据.
    value属性: 设置input标签的默认值,submit和reset为按钮显示数据.
    checked属性: 默认被选中.
    placeholder:给文本输入框设置默认值,输入数据之后就消失了.

<select>: 下拉列表框.
    <option>: 子标签.
    	selected:选中当前列表项, 选中 --> true.
  	    value ：发送给服务器的选项值。

二、CSS

CSS:层叠样式表 , css+div布局(灵活)
样式: 给HTML添加需要显示的效果.
层叠: 将所有的样式叠加到一起,共同作用于该标签.

css格式:

 选择器{
	属性1:属性值;
	属性2:属性值;
	...
	属性n:属性值;
}
工作中css很少写注释, 多个属性之间也很少使用回车换行.

引入css样式:

a.行内式:  <a style = “color: red ; ”>  只针对当前标签有用.    
b.内嵌式:  <style type = “text/css”>  针对当前html页面的所有选择的元素.
c.链入式:  <link rel=”stylesheet” text=”text/css” href=”文件位置” > 
 		  哪个html页面引入的,就对哪个html有效(可以被多个html引用)

★优先级: 行内式 > 内嵌式和链入式 (后边会覆盖前面的内容.)

元素选择器:

a.元素选择器:  用标记名称作为选择器  h1{  }
b.id选择器:    #id名. 多个标签使用同一个id,只会得到第一个.
c.类选择器:    class=”名字”      .class名
d.后代选择器:  父标签  后代标签   #d1 div{  }
e.属性选择器:  input[type = “text”] { 进行过滤 }
f.伪类选择器:  给超链接设置样式.

css的样式:

border ：设置边框的样式
	   格式：宽度 样式 颜色     例:style=”border:1px solid red”
	   样式: solid 实线 , double 双线 , dashed 虚线 , dotted 点线.
	   border-left:左边框
	   border-bottom:下边框

<div>: 块标签 , 独自占据一整行.
<span>: 行内元素 , 不会占用一行.
	   div和span标签: 都是一块一块的解析,显示快.
display:属性值 
	   inline : 显示为行内元素.(行内元素默认选项)
	   block : 显示为块元素.(块元素默认选项)
	   none : 此元素将被隐藏 , 不显示.
	  
背景颜色: background-color:
背景图片: background-image : url(地址)
字体颜色: color
字体大小: font-size
字体样式: font-family: 宋体,楷体,幼圆.
取消下划线: text-decoration:none

布局: float: left  元素向左浮动.
	  clear: both  取消上一行的浮动,从下一行在从新开始

CSS的盒子模型:

 外边距-margin:盒子到页面之间的距离.
 	   margin: 50px  auto; (上下50px , 左右居中)
 	   margin: 50px 150px 100px;(上50,右150,下100,左150)
 内边距-padding: html元素到盒子之间的距离.
 	   padding – top : 上内边距
	   padding - left: 左内边距