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的主要内容，如果未能解决你的问题，请参考以下文章