HTML+CSS

Posted ybxw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML+CSS相关的知识,希望对你有一定的参考价值。

1、基本内容

骨架
<!DOCTYPE html> #文件类型
<html>
<head>
<meta charset="utf-8"> #编码
<title>https://www.cnblogs.com/ybxw/</title>
</head>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

<br/> (换行)
<hr/> (水平线)

无序列表
<ul><li>项目</li></ul>
有序列表
<ol><li>项目</li></ol>
定义列表
<dl><dt>项目 1</dt><dd>描述项目 1</dd></dl>
表格
<table border="1">
<tr>
<th>表格标题</th>
<td>表格数据</td>
</tr>
</table>

框架
<iframe src="demo_iframe.htm"></iframe>
frameborder="0" #移除

表单
<form action="" method="post/get"> #提交页面,提交方法
<input type="text" name="email" size="40" maxlength="50" placeholder=""> #文本框
<input type="password">
<input type="checkbox" checked="checked"> #复选框 选择一个多个或不选,checked为默认被选中
<input type="radio" checked="checked"> #单选框 name=""设置单选框为一组
<input type="submit" value="Send"> #提交按钮
<input type="reset"> #重置
<input type="hidden"> #隐藏信息
<select> #选项
<option>苹果</option>
<option selected="selected">香蕉</option> #默认选项
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea> #文本区域
</form>
value定义表单默认显示内容(text,submit,reset,button)

网址
<a id="" href="" target="_blank/iframe"></a> #target显示页面的位置,id文档书签标记
<title></title> #标签定义了工具栏、收藏夹、搜索结果页面的标题
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
<meta> 定义搜索引擎找到的关键字

图片
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> #替换图片信息
音频
<audio scr="" autoplay controls loop> #自动播放 控制音量
<source src=""/> #<audio><source>
<video>

2、属性设置

布局 区块
<div>定义了文档的区域,块级
<span>用来组合文档中的行内元素, 内联元素
display
block块元素:当同时存在多个块元素,每个块元素独占一行,设置宽高起作用
inline行内元素:当同时存在多个行内元素,元素都会显示一行,直到放不下另起行,无法设置宽高
inline-block行内块元素:当同时存在多个行内块元素,元素显示在一行,设置宽高起作用

设置字体
div
line-height:200px; #行高
font-size:30px; #字体大小
text-align:left center right; #居中
font-weight:bolder bold normal; #粗细
font-family:""; #字体
font:normal 20px/200px ‘微软雅黑‘;
text-shadow: 0px 0px 0px red; #阴影 垂直 水平 阴影程度
text-shadow: 1px 1px 0px #333,-1px -1px 0px #fff; #凹凸文字

过渡属性
<style>
div
backgroud-color:orange;
transition:all 1.5s linear 1s; #应用于所有属性需要1.5秒过渡时长,匀速,延时1秒后发生

div:hover
backgroud-color:orange; #鼠标触发变化

#添加在hover中鼠标离开不会有过渡变化

布局 表格
<tr>
<td colspan="2" style="background-color:#FFA500;"> #横跨两列
<h1>主要的网页标题</h1>
</td>
</tr>

定义了客户端脚本 javascript
<script>
function myFunction()

x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式

</script>
<button type="button" onclick="myFunction()">点击这里</button>
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

 3、内容补充

css 命名规则
1.不能是纯数字或以数字开头
2.不能是中文
3.不能以特殊字符开头或包含~!@#$%^&*()
4.尽可能可知意

选择器
覆盖性,继承性,优先级
标签 p
id #id同一个页面中同一个id只能出现一次
class .class可出现一个标签同时多个类
id>class>标签

快捷键
p*2(Tab)
div./#box(Tab)=<div class/id="box"></div>
link:css(Tab)=<link rel= href="style.css">
audio(Tab)
属性值等于属性名,可以直接写属性名

CSS分类
内嵌CSS
<style>
外链CSS
<link rel="stylesheet" type="text/css" href=""> #rel声明样式 与style兄弟级
行内CSS
<div style="">
行内>外链 内嵌
!important

 

以上是关于HTML+CSS的主要内容,如果未能解决你的问题,请参考以下文章

前端个人总结HTML+CSS篇

CSS HTML链接图像悬停更改段落格式

鼠标悬停时间 CSS HTML [重复]

HTMLCSS

使用 CSS HTML 垂直对齐提交按钮

利用css+原生js制作简易钟表