Html(超文本标记语言)CSS样式层叠样式表单

Hyper Text Markup Language

1.页面

页面分为三部分：分别是内容(结构),表现,行为.
<!--显示一个单独的页面-->
<iframe src="" width="" height=""></iframe>
内容是我们在页面中可以看到的数据。
表现指的是这些内容在页面上的展示形式，比如说：布局 颜色 大小等等 Css
行为指的是页面中的元素与输入设备交互的响应，  JavaScript

2.标签

1.基础段落标签

<p></p>分段    <width>宽      <height>高度                
<br>换行       <b></b>加粗     <hr>水平线               
<i></i>斜体    <s></s>加删除线   <h几><h几>标题  
​

2.a链接标签

a链接属性

<!--target  打开新页面的方式-->
_self（覆盖，默认）_blank（创建新窗口打开新页面）_top（在浏览器的整个窗口打开 将会忽略所有的框架结构）_parent（上一级窗口）注意：_top和_parent方式用于框架页面
<!--title  鼠标悬停时显示-->
鼠标悬停时提示title后的内容
<!--超链接中的name属性  锚功能  -->
实现页内跳转  点击第1任 跳转到下面
<a href="#1">第1任</a><br />
<a name="1">这里是第1任的锚</a><br />
<!--电子邮件、FTP和Telnet的链接-->
<a href = "mailto:邮件地址">给我发email</a>
<a href = "ftp://服务器IP地址或域名">链接的文字</a>
<a href = "telnet://服务器IP地址或域名">链接的文字</a>

3.列表，表格

列表

<!--无序列表-->         <!--有序列表-->        <!--自定义列表-->     
<ul>                     <ol>                   <dl>
    <li></li>                 <li></li>               <dt></dt>
</ul>                    </ol>                        <dd></dd> 
                  list-style:none;取消有序的点    </dl>

表格

<table border="1"> 
    表格边框合并border-collapse:collapse;
    <tr>
        <th>表头</th>          <!-- tr 是一行 td是行内格-->
    </tr>
    <tr>                      
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>
<!--border-->设置边框
<!--cellpadding-->设置单元格与文字间的距离
<!--cellspacing-->设置单元格与单元格之间的长度
合并单元格  <td rowspan="2"></td>
<!--rowspan-->合并行
<!--colspan-->合并列

4.表单（input）

form表单 action属性设置提交的服务器地址 method设置提交的方式 Get(默认值)或者Post

输入限制：disabled(字数限制) size(字段宽度) step(间隔)

表单提交不成功的三个原因：1.没有name属性2.单选复选下拉框需要value属性3.表单项不在提交的form标签里

<input type="text" placeholder="普通输入框">	<input type="text" placeholder="普通输入框">
textare<textarea rows="" cols=""></textarea>	大文本框 rows多少行 cols 每行多少字符
text placeholder 文本框虚字	文本框 maxlength输入的字符数
password 密码框	submit 提交（action提交到哪method提交方式）
button value="按钮叫啥"	按钮 onlick=“alert(’出来什么‘)”,
radio单选 checkbox 多选	checked 默认选中
date日期输入 ，week(选择年周)	time(选择时区)month=“月”
color 颜色选择器	email 电子邮件
select option	下拉菜单 file 选择文件
number min=“最小值” max =“最大值”	数字输入 重置按钮reset

5.Font字体样式

font-sise：字体大小；	font-weight：加粗；
font-family:"字体”;(中文才加引号)	选择器{font：样式 粗细 字号 字体 ；}
text-indent：2em；首行缩进	text-decoration: none; 取消下划线
当文字溢出时overflow：hidden

6.阴影，渐变色，图片，边框，旋转，透明

<!--a链接的css-->
a:link(为访问)
a:visited(访问过后)
a:hover(鼠标移动上)
<!--盒子阴影 背景渐变色设置-->
box-shadow:阴影类型，x轴，y轴，模糊半径，阴影颜色;
background-imgage:linear-gradient(#....,#....);repea（平铺）
background-position:;<!--背景位置-->
<!--border  边框设置-->
border: 1px solid red;
dotted 点线 dashed 虚线
border-raclius:100px最大;
<!--图片设置 img--> 
<img src="" alt="">alt添加描述性文本
<!--旋转--> 
transform:rotate(45deg);
<!--透明化--> 
opacity:0;

7.display

display:none;<!--不展示-->
display:inline-block;<!--行内块-->
display:block;<!--块-->
display:inline;<!--行-->

8.定位

position:static(默认)rlative(相对位置)absolute(绝对位置)fixed(固定位置);
fixed(固定位置)不会随着页面滚动消失
absolute(绝对位置)以上一个被定位的盒子为基准(若不存在上一个则以整体为基准)
rlative(相对位置)以原本的位置为基准

9.页面内的开辟页面

    <iframe src="" width="" height=""></iframe><!--显示一个单独的页面-->
                <!--点击a链接跳转到页面中的页面-->
        <iframe src="" width="" height="" name="abc"></iframe>
        <a href="www.baidu.com" target="abc">跳转到abc</a>2.

10音频视频

<!--音频-->
<audio src="地址" controls="controls"(添加一个控制器)>当前浏览器不支持audio</audio>
                        <!--自定义控制器-->
<button οnclick="clickA">暂停或者播放</button>
<audio src="" controls="controls">
        当前浏览器不支持audio
</audio>
<script type="text/javascript">
    var a = document.getElementById("audio");
    function clickA(){
        // 是否暂停
        if (a.paused) {
            a.play()//播放
        }else{
            a.pause()
        }
    }
</script>

2.CSS层叠样式表单

Cascading Style Sheet（CSS）

用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。（选择器{属性：值；}）

1.选择器

<!--标签名选择器-->：
  标签名{
    属性:值;
  }
<!--id选择器-->
  #id名{
    属性:值;
}
<!--class(类选择器)选择器-->
  .class名{
    属性:值;
}
<!--组合选择器-->
   名字加逗号隔开{
    属性:值;
}
<!--属性选择器-->
    标签[属性]={}   input[type$='d']={} 选中d结尾
<!--伪类选择器-->
    ul li:nth-child(2n){ 匹配第n个子元素
        background-color: darkslategray;
    }
    ul li::before{
        content: url(img/tb.gif);
    }