html :超文本标记语言
html三大内容
- 标签: 承载内容
- 层叠样式表:渲染页面
- JavaScript:交互式行为
HTML中的注释:在代码外的注释
代码内的注释:/* */或者//
html分为<head> </head>,<body></body>
<meta charset="utf-8"> - 网页编码格式
<title>标题内容</title>
css - 指的是 cascading style sheet (层叠样式表,渲染页面)
<style type="text/css">
h1~h6 :一级标题到六级标题
h1{
color:red; - 设置一级标题的字体颜色
font-size:80px或者2cm; - 设置字体大小(可以用cm也可以用px像素)
font-family:宋体; -设置字体风格,必须要写自己电脑上有的字体,不然没有效果
}
p{
设置p标签(<p>段落</p>)的风格
font-size:40px;
}
p:first-letter{
color:yellow;
font-size:80px;
设置标签<p>段落</p>的第一个字的风格
}
<p class="a">段落</p>
.a{
设置标签p段落中的一行字体风格
color:green;
font-size:40px;
}
<a href="网站地址">xx</a> -设置xx的超链接(可以设置链接到别的网站,也可以链接到自己的网页上)
a{
设置链接的风格
color:red; -设置链接的颜色
text-decoration:none; -设置链接下面的下划线为无
}
a:hover{设置链接点击后的风格
color:gerrn; - 链接点击后的颜色
}
链接:
1.页面链接:
<a href="网页地址" target="_blank">链接名字</a> - a 是 anchor 页面链接 ,可以链接到别的网站上,也可以链接自己写的页面,其中target="_blank"是在另一个空白页面上打开 ,不写或者写slef是在当前页面打开
2.锚点链接:
<a name="锚点名"></a>
去锚点:<a href="#锚点名">去锚点名</a>
3.功能链接:
打开其他应用等
<a href="应用名例如邮件客户端">做什么事情(有什么功能)</a>
打开qq:
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="imgs/python-logo.png" alt="你好大撒奥多" title="你好大撒奥多"/></a>
放图片:
<img title="图片标题(把鼠标放到图片上可以显示出来)" src="图片地址(可以是网上的图片地址也可以是自己电脑上的图片地址,自己电脑上的写相对路径)" alt="替换字(当图片加载不出来或者自己地址写错的时候导致没有图片的时候用替换字替换图片 - 提示图片内容)">
<hr> -分割线
三种列表:
-
有序列表:
<ol>
<li>有序列表第一列</li>
<li>有序列表第二列</li>
...
</ol> -
无序列表:
<ul>
<li>无序列表第一列</li>
<li>无序列表第二列</li>
...
</ul> -
定义列表:
<dl>
<dt>定义列表第一列</dt>
<dt>定义列表第二列</dt>
...
</dl>
列表可以嵌套
<script type="text/JavaScript"> - js语法
function 函数名(){
for (var i=1;i<=3;i+=1) - for循环重复三次
window.alert('
作者:李白'); - 显示
}
</script>
要写个按键来使用
<button onclick="函数名()">按键名</button>
<script type="text/javascript">
function shutDown(){
if (window.confirm('确定关闭吗?')){
window.close()
}
}
</script>
<button onclick="shutDown()">关闭</button>
实体替换符
上标(sup)/下标(sub)
H2O
杨广剑1
删除线:<del>内容</del>
加粗:<strong>内容</strong>
倾斜<em>内容</em>
填入:<ins>内容</ins>
<hr> <!-- 分割线 -->
<p class="a">床 前<del><strong><em>明月</strong></em></del>光<sup>1</sup></p>
<p>疑是<ins>1</ins>地上霜©</p>
<p>举头™望[明]月</p>
<p>低<头>思故®乡</p>
<p>H<sub>2</sub>O</p>
<p>这个文本包含了<sup>上标</sup>标志</p>
实体字符:
查看菜鸟教程上实体字符的使用(有类似加音标,加<>,注册上标,版权等)
