1. HTML是网页内容的载体。衣服。
2. CSS样式是表现。穿衣风格。
3.JavaScript是用来实现网页上的特效效果。动作和互动。
一 基本结构
<html> 根标签，包含所有网页标签
<head></head> 定义头部文档
<body></body> 网页主要内容
</html>
二 标签
(一)头部
<head>
<title></title>
<meta>
<link>
<style></style>
<script></script>
</head>
(二)注释 <！--注释文字-->
(三)主体
1.<body></body>网页显示的内容，主体
2.<hx></hx>标题
3.<p></p>段
4.<em></em>斜体加强，语义强调。
5.<strong></strong>粗体加强，语义强调。
6.<span></span>设置单独的样式，无语义。
7.<q></q>段落中的引用，自动加“”，语义引用别人的话。
8.<blockquote></blockquote>整段引用，样式是段落两侧缩进，语义引用别人的话。
9.<br />回车，样式分行显示，属于空标签。(空标签:无内容，单只出现，共三个<br />,<hr />,<img />)
10.<hr />水平横线
11.<address></address>地址，样式为斜体
12.<code></code>显示一行代码
13.<pre></pre>多行代码
14.<ul>
<li></li>
<li></li>
...
</li>
新闻列表，样式:信息标题前加大黑点。
15.<ol>
<li></li>
<li></li>
...
</ol>
新闻列表，样式:信息标题前加序号。
16.<div></div>独立的逻辑板块
<div id=“...”>命名，使逻辑更清晰
17.<table summary=“...”>表格和摘要
<tr>
<th>...</th>
<th>...</th>
...
</tr>
<tr>
<td>...</td>
<td>...</td>
...
</tr>
html学习记录
18.<caption>...</caption>为表格添加标题
19.<a href=“目标网址” target=“_blank” title=“鼠标划过时显示的文本”>显示在屏幕上的文本</a>
target在新网页中打开
20.mailto自动添加邮件地址
html学习记录
21.<img>插入图片
<img scr=“图片地址” alt=“下载失败的替换文本” title=“鼠标划过已显示图片时的文本”>
22.<form method=“传送方式” action=“服务器文件”> <form>表单标签
23.<form>
<input type=“text/password” name=“文本框命名” value=“默认值” />(文本框或密码框)
</form>
24.<textarea rows=“行数” cols=“列数”>默认值</textarea>多行文本
25.<input type=“radio/checkbox” name=“名称” value=“提交值” checked=“checked”/>单选框或复选框(多个选项注意name一致)
...
26.<select>
<option value=“提交值” selected=“selected”>提交值</option>默认
...
</select>单选下拉列表框
27.<select multiple=“multipul”>
...
</select>
28.<input type=“submit” value=“按钮上显示的字”>提交按钮
29.<input type=“reset” value=“按钮上显示的字”>重置按钮
30.<label for=“控件id名称”>...</label>选中与该标签相关联的表单
(四)标签分类
1.常用块状元素(block)：<div> <p> <h1>...<h6> <ol> <ul> <dl> <table> <adress> <blockquote> <form>
特点：
（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
（2）元素的高度、宽度、行高以及顶和底边距都可设置。
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
2.常用内联元素(inline):<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
特点:
（1）和其他元素都在一行上；
（2）元素的高度、宽度及顶部和底部边距不可设置；
（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。
3.常用内联块状元素(inline-block):<img> <input>
特点:
（1）和其他元素都在一行上；
（2）元素的高度、宽度、行高以及顶和底边距都可设置。
4.转换
(1)内联a转块状
a{display:block;}
(2)块状转内联
div{display:inline;}
(五)盒模型
html学习记录
html学习记录
html学习记录
html学习记录
1.div{border:2px solid red}边框设置(缩写)
border-radius:5px;圆角边框
div{
border-width:2px;(thin,medium,thick)
border-style:solid;(实线，dashed虚线，dotted点线，)
bordet-color:red;
}
div{
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
border-bottom:1px solid red;
}
2.div{pading:20px 10px 15px 30px;}元素内容与边框之间填充(上右下左)
div{
padding-top:20px ;
padding-right:20px ;
padding-bottom:20px ;
padding-left:20px ;
}
div{padding:10px;}
div{padding:10px 20px;}上下10px,左右20px
3.div{margin:20px 10px 15px 30px;}元素内容与边框之间填充(上右下左)
div{
margin-top:20px ;
margin-right:20px ;
margin-bottom:20px ;
margin-left:20px ;
}
div{margin:10px;}
div{margin:10px 20px;}上下10px,左右20px
div{margin:10px 20px 30px;}左右相同
(六)语法
1. 空格
网友评论