作者有话说:
欢迎来到好文章太长没人看系列~都是干货
本文会详细展示html编写细节,html代码编写难度较低,可读性较强,仔细认真看一遍本文,即可按照自己喜欢的想法设计网页排版布局,希望大家学有所获!
目录
简单认识HTML
HTML的全称为超文本标记语言;
超文本是指页面可以包含照片、链接、声音、视频等内容;
标记是指通过标记符号(标签)来告诉浏览器网页内容如何显示。
然后浏览器解析代码,就变成了我们平时看到的网页界面。
HTML语言语法
HTML分为两部分即头部部分和主体部分。
head头部部分
'head标签'里面包含所有的头部标签(即属于头部区域里面的标签)
头部区域里的标签:<title>定义网页标题、<style>、<meta>、<link>、<script>、<base>
<meta charset="utf-8" /> utf-8编码
<title>今日头条</title>
<!-- 注释语言(网页上不会显示) ctrl+/ -->
<link rel="stylesheet" type="text/css" href="css/css.css"/> 和css文件链接
其他标签我们后面会详细展示...主体部分包含内容颇多 ,我们接下来一一学习
标签
HTML中的标记就是标签,用来描述网页。
标签属性
标签可以有属性,属性说明标签怎么使用或显示
<标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>
属性名可以有一个或多个
常用标签
- 标题标签<h1></h1>…..<h6></h6>
- 段落标签 <p></p>
- 换行标签 <br/>
- 分割线 <hr/>
- 列表
无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
- 超链接<a></a>
- 图像标签<img/>
在body中 <img src = "照片路径" 属性.......... />
HTML中特殊转义符
防止一些特殊符号被浏览器解析错误,所以推荐我们使用转义符。
表格
表格结构:
- Border属性(边框)Border=“number”
- background属性(背景图片)background=“图片储存位置”
- bgcolor(背景颜色)bgcolor=“颜色”
- width宽、height高属性 width=“100” height=“100”
- cellpadding:内边距 cellspacing:外边距
- algin:水平对齐方式
- center:居中对齐
- right:右对齐
- left:左对齐
- valign:垂直对齐方式
- top:顶部对齐
- middle:居中对齐
- bottom:底部对齐
- font:字体样式
- color:颜色
- size:大小
- face:字体
- colspan:列合并 colspan = “number”
- rowspan:行合并 rowspan = “number”
表单
- 文本输入框:
<input type=“text”类型为文本框 name=“username” value=“张三”文本框默认值 readonly=“readonly”设置内容只读 placeholder=“请输入” 提示信息 disabled=“disabled”内容变灰色并不可使用 />
- 密码输入框:
<input type=“password” value = "21649"/>
- 单选按钮:
<input type=“radio” value = "男" checked=“checked”/>
- 多选按钮:
<input type=“checkbox” name= “czx” value = "男" checked=“checked”/>
- 文件选择框:
<input type=“file” name= “img” />
- 下拉框:
<select name="z">
<option value ="001">程序员</option>
<option value="002" selected = ” selected ” >学生</option>
</select>
- 多行文本域:
- 按钮:
html知识概要
<h1>:一级标题
<h2>:二级标题
<h3>:三级标题
<h4>:四级标题
<h5>:五级标题
<h6>:六级标题
<p>:段落
<img>:图片table:表格
tr:行
td:列
border:边框
cellpadding:内边距
cellspacing:外边距
algin:水平对齐方式
center:居中对齐
right:右对齐
left:左对齐
valign:垂直对齐方式
top:顶部对齐
middle:居中对齐
bottom:底部对齐
font:字体样式
color:颜色
size:大小
face:字体
colspan:列合并
rowspan:行合并ul:无序列表
li:列表项
ol:有序列表
li:列表项
type:项目符号类型
dl:解释性列表、叙述性列表
dt:被解释项
dd:解释项
hr:分割线form:表单
input:输入框
type:输入框的类型
text:文本框
password:密码
br:强制换行
radio:单选
name:编组
checkbox:复选框
select:下拉选择
option:选项
textarea:文本域,多行文本框
cols:列
rows:行
submit:提交
reset:取消
value:按钮上显示的文字
css简述
css基本语法
行内样式表
- 行内样式表,又称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式
格式:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
<div style="width: 200px;height: 100px;background-color: #FBC240;" id="d2">
<table border="1" cellspacing="0" cellpadding="0" width="200px" height="100px">
<tr><td colspan="3" align="center">
<input type="text" id="textc" value="0"/>
</td></tr>
<tr><td align="center"><input type="button" id="k" value="开始" onclick="startc()"/></td>
<td align="center"><input type="button" id="f" value="复位" onclick="resetc()"/></td>
<td align="center"><input type="button" id="t" value="停止" onclick="stopc()"/></td>
</tr>
</table>
</div>
- 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
<head>
<meta charset="utf-8">
<title>计数器</title>
<style type="text/css">
#d1{
position: absolute;
left: 40%;
top: 18%;
background-color: #C52916;
}
#textc{
text-align: center;
}
#d2{
position: relative;
left: 50px;
top: 25px;
}
#sp1{
color: white;
text-align: center;
}
#sp2{
color: white;
text-align: center;
}
</style>
外部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计数器</title>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
css选择器
css文本,背景
文本
- color:字体颜色
- font-size:字体大小
- font-family:字体
- text-align:文本对齐
- text-decoration:line-through:定义穿过文本下的一条线
- text-decoration:underline:定义文本下的一条线
- text-decoration:none:定义标准的文本
- font-style: italic;斜体文本
- font-weight:字体粗细
- line-height:设置行高
- letter-spacing:可以指定字符间距
- text-indent:用来设置首行缩进
- opacity:设置标签透明度
背景
- background-color背景颜色
- background-image背景图片
- background-repeat背景重复
- background-size背景尺寸
- background- position 背景位置
css列表
- list-style-image 将图象设置为列表项标志。
- list-style-position 设置列表中列表项标志的位置。
- list-style-type 设置列表项标志的类型。
- list-style 简写属性。
css伪类
- :hover伪类表示鼠标移入的状态
- :active表示的是被点击的状态
- :focus向拥有键盘输入焦点的标签添加样式
块级,行级,行级块标签
div和span 盒子模型
- div标签
- span标签
- 盒子模型
清除浏览器的默认样式 *{
浮动 float
块级标签和行级标签都可以浮动,当一个行级标签浮动以后将会自动变为一 个块级标签。当一个块级标签浮动以后,宽度会默认是内容的宽度,所以当漂浮一个块级标签时我们 都会为其指定一个宽度
当一个标签浮动以后,其下方的标签会上移。
浮动会使标签完全脱离文档流,也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流,这时不会再影响父标签的高度。也就是浮动标签不会撑开父标签。
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。可选值: left : 忽略左侧浮动 right :忽略右侧浮动 both :忽略全部浮动
css定位
position:absolute 绝对定位 relative 相对定位
absolute 绝对定位
绝对定位是不占空间的,运用了绝对定位的标签会脱离原来的文档流,浮动起来,因此视觉上会其他 的标签重叠。 可以通过position: absolute; 开启绝对定位, left right top bottom四个属性来设置标签的偏移量
绝对定位的特点1.开启绝对定位,会使标签脱离文档流2.开启绝对定位以后,如果不设置偏移量,则标签的位置不会发生变化3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位(一般情况,开启了子标签的绝对定位都会同时开启父标签的相对定位)如果所有的祖先标签都没有开启定位,则会相对于浏览器窗口进行定位4.绝对定位会使标签提升一个层级5.绝对定位会改变标签的性质,行级标签变成块标签
relative 相对定位
相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动,移动后原来的位置还被占用。可以通过position:relative; 开启相对定位,left right top bottom四个属性来设置标签的偏移量。
相对定位的特点当标签的position属性设置为relative时,则开启了标签的相对定位1.当开启了标签的相对定位以后,而不设置偏移量时,标签不会发生任何变化2.相对定位是相对于标签在文档流中原来的位置进行定位3.相对定位的标签不会脱离文档流
css知识概要
div:盒模型,盒子,一个一个的模块
css:层叠样式表
*:通配符,指的是给所有的标签一加载就要首先完成的样式
class:类名分类,命名方式可以用英文,英文加数字,英文加数字或者下划线,不可以用纯数字,单个字母,其他符号,中文命名,可以重复使用的
id:id命名,命名方式和class一样,但是id是具备唯一标识的。不能多次重复使用
float:浮动,影响的是并列结构,不影响父子结构,也不受父级或者子级的影响
margin-left: auto;
margin-right: auto;:建立在没有做float的情况下,在父级块儿中居中
font-size:字体大小
font-weight:字体的粗细
normal:正常,常规
text-align:文本对齐方式map:热点地图
usermap:使用地图
coords:坐标
shape:形状
rect:矩形
line-height: 35px; /*行高:就是一行文字的高度,所有行的行高加起来等于整个块儿的高度*/
text-decoration: none; /*文本的链接特殊样式:设置为无*/
a:hover{ /*是指a标签的伪类,鼠标悬浮的样式*/
text-decoration: underline; /*文本的链接特殊样式:设置为下划线*/
list-style: none; /*列表的项目符号样式:设置为无*/
display: inline; /*元素的表现形式:行内元素的样式*/
background-repeat: no-repeat; /*背景重复设置为不重复*/
background-position: bottom; /*背景图片的位置:定位到底部*/
text-indent: -9999px; /*文本缩进,-9999是一个特定的特殊值,表示不管在什么屏幕分辨率下都不显示*/<pre>段落原样输出< /pre>
position:定位
fixed:固定定位,释放了物理位置,在有父级(无论定位与否)的状态下,释放掉自己的父级,保留空间位置,不会随着网页的滚动而滚动,悬浮在窗口上,位移的参考对象是body
top,left,right,bottom:指的是位移的方向,可以是正数表示正方向移动,负数表示反方向移动
absolute:相对定位,释放了物理位置,在有父级(无定位)的状态下,释放掉自己的父级,保留空间位置,会随着网页的滚动而滚动,位移的参考对象是body。在父级(有定位)的状态下,不会释放掉自己的父级,位移的参考对象是父级。
relative:绝对定位,不会释放了物理位置,在有父级(无论定位与否)的状态下,不会释放掉自己的父级,位移时参考对象为自己本身的物理位置.border-radius:边框的半径
transform:变换
translate:位移
scale:缩放
skew:斜切
rotate:旋转
transition:过渡
animation:动画
linear:匀速动画
ease:非匀速
infinite:循环
@keyframes:动画的牵引