首页手记 HTML+CSS基础之HTML学习手记

HTML+CSS基础之HTML学习手记

标签：

Html/CSS

HTML+CSS基础

HTML和CSS的关系：

HTML是网页内容的载体；
CSS样式是表现；
Javascript是用来实现网页上的特效效果；

HTML标签

标签一般成对出现，分开始标签和结束标签，例如<html></html>，标签与标签之间可以嵌套，标签不区分大小写，但建议小写。

Head标签

head标签为文档的头部，描述了文档的各种属性和信息，包括文档的标题等，典型的head标签包含的内容如下所示：

<head>
    <title>HTML+CSS基础</title>
    <meta name="Description" content="文档描述" />
    <link rel="stylesheet" href="/static/moco/v1.0/dist/css/moco.min.css" type="text/css" />
    <style>
    div{
        border:1px solid;
    }
    </style>
    <script type="text/javascript">
    </script>
</head>

HTML和CSS代码注释

HTML代码注释不会在结果窗口中显示出来。
HTML代码注释的格式为

<!--注释文字-->

CSS样式代码注释不会生效,单行多行注释采用同一种注释方法

div{
    font-size:12px;/*单行注释*/
}
/*
  多行注释行1
  多行注释行2
*/

HTML标签的语义化

使用语义化的标签，更容易被搜索引擎收录

段落标签<p></p>
标题标签<h1>/h1>、<h2>/h2>、<h3>/h3>、<h4>/h4>、<h5>/h5>、<h6>/h6>
h1~h6，6级标题标签
强调语气标签<strong></strong>、<em></em>
em斜体，表示强调，strong粗体，表示更强烈的强调
独立样式标签<span></span>
没有任何语义，但是可以在任何地方直接对一段文字设置单独的样式
文本引用标签<q></q>、<blockquote></blockquote>
单行引用标签q，多行引用标签quote
换行标签<br />
br是空标签，没有html内容的标签就是空标签
空格
在html代码中仅在输入时才代表空行
水平横线标签<hr />
hr也是一个空标签，在网页中增加一条横向的水平线
地址标签<address></address>
常用来描述一个地理位置、电子邮件地址、签名或者作者的文档身份等。
代码标签<code></code>、<pre></pre>
如果想在网页中显示一行代码，使用code标签；如果显示多行代码，使用pre标签，其可以将代码行的格式保留。
无序列表标签<ul><li></li></ul>
无序列表标签前面默认自带圆点样式
```
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
```
有序列表标签<ol><li></li></ol>
有序列表标签默认有数字序号，从1开始
```
<ol>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ol>
```
超链标签<a></a>
- href属性用于设置链接地址；
- title属性用于设置鼠标划过时的显示内容，对搜索引擎更好；
- target属性用于设置在新标签页打开网页，还是在当前页更新打开网页
```
<a href="www.baidu.com" title="点击进入百度网" target="_blank">百度网</a>
```
超链标签之邮件mailto
- mailto:邮件关键字，后面紧跟着是邮件地址，如果有多个邮件地址使用分号;分割
- mailto:关键字后如果有多个参数，则除了第一个使用问号之外，其余的都是用取地址符&分割；
- cc=为抄送关键字，如果有多个邮件地址使用分号;分割
- bcc=为密送关键字，如果有多个邮件地址使用分号;分割
- subject=为主题关键字
- body=为内容关键字
```
<a href="mailto:joeychou@163.com;987@163.com?cc=123@163.com&bcc=456@163.com&subject=主题&body=内容">有什么意见请联系我们</a>
```

图片标签<img></img>
图片格式支持JPEG、PNG、GIF

src属性为图片链接地址
alt属性为图片下载失败时显示的文本

title属性为鼠标划过时显示的文本

<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="1.jpg" alt="图片下载失败显示文本" title="鼠标滑过显示文本" />

表单标签<form></form>
- method属性：有两个值post/get，数据传送的方式，默认为get方式，适用于少量数据且没有敏感信息，使用get方式提交时信息都是可见的；post方式，适用于大量数据提交，因为使用get方式提交浏览器长度是有限制的，而且post方式提交的内容不可见，安全性更高；
- action属性：用户输入的数据被发往的地方；
表单标签之label标签，label标签有for属性，用于将其相关的控件进行绑定，实现鼠标点击标签时，自己选中相关的控件，for属性中的id值为相关控件的id值；
表单标签之inputbox标签类型之text、password、radio、checkbox
- text文本输入框
  text文本输入框支持单行文本输入，多行选用textarea
  - name属性，文本输入框的名字，多个控件可以使用同一个名字，如果空间没有name值，后台是无法获取数据的；
  - id属性，id值必须全文档唯一，主要用于客户端页面中，与label进行控件关系绑定时，即使用的id
  - value属性，文本输入框的默认输入值
- password密码输入框
  - name属性同text文本输入框
  - id属性同text文本输入框
  - value属性为密码输入框默认密码输入值，且显示默认为圆点表示，不显示实际值
- radio单选框
  - name属性同text文本输入框
  - id属性同text文本输入框
  - value属性为提交给后台服务器的值
  - checked属性为默认是否选中
- checkbox多选框
  - name属性同text文本输入框
  - id属性同text文本输入框
  - value属性为提交给后台服务器的值
  - checked属性为默认是否选中
表单标签之下拉列表select
- option标签，每个option标签就是一个选项
  - value属性，为提交给后台服务器的值；
  - selected属性，为默认选择的选项
  - 标签中间为显示给用户的值
- select属性multiple如果设置了，下拉列表可以选择多个选项，使用CTRL键+点选选项值
表单标签之文本域textarea
文本域支持多行文本输入，可以设置行数和列数
- rows，文本域的行数
- cols，文本域的列数

表单标签之submit和reset

submit为提交按钮
点击submit按钮会将表单中的所有信息都提交到action所执行的文件中
- input type="submit"
- name属性
- value属性
- id属性

reset为重置按钮

input type="reset"
name属性
value属性

id属性


<form method="post" action="login.php">
<label for="user">用户名:</label>
<input type="text" id="user" name="user" value="你叫啥" />
<br />
<label for="pass">密 码:</label>
<input type="password" id="pass"/>
<br />
<label for="sex">性 别:</label>
<label>男</label>
<input type="radio" value="女" id="sex"/>
<label>女</label>
<input type="radio" value="男" id="sex" checked="checked"/>  
<br />
<label>年 龄:</label>
<select>
<option value="18">18</option>
<option value="19">19</option>
<option value="20" selected="selected">20</option>
</select>
<br />
<label>职 业:</label>    
<select multiple="multiple">
<option value="软件开发工程师">软件开发工程师</option>
<option value="心理咨询师">心理咨询师</option>
<option value="作家" selected="selected">作家</option>
</select>    
<br />
<label>爱 好:</label>
<label for="swimming">游泳</label>
<input type="checkbox" value="游泳" id="swimming" checked="checked"/>
<label for="song">唱歌</label>
<input type="checkbox" value="唱歌" id="song"/>
<br />
<label>简 介:</label>    
<textarea rows="5" cols="6">

点击查看更多内容