Html 笔记

特殊符号

<!--注释--> 注释

<em></em>斜体   <strong></strong>加粗 <hr/>分割线 <br/> 换行

 空格  >大于号>  <小于号<   "引号(“”) ©版权符号

<span></span>加粗

文本元素

font-size:16px;  文字大小

Font-weight: 700 ;   值从100-900，文字粗细，不推荐使用font-weight:bold;

Font-family:微软雅黑;  文本的字体

Font-style: normal | italic;      normal 默认值  italic  斜体

line-height: 行高

文本属性连写 font: font-style font-weight  font-size/line-height  font-family;

注意：font:后边写属性的值。一定按照书写顺序。

       文本属性连写文字大小和字体为必写项。

Font:italic 700 16px/40px  微软雅黑;

图片链接  ../表示上一级文件夹

<img src ="img/mei.jpg"alt="加载失败" height="200" width="300">

  Src 图片地址

Alt代表如果加载不了图片就执行alt的文字 height高度 width 宽度

超链接

 <a href="html/demo02.html" target="_self">文字</a>

_blank 新建一个页面打开链接

_self 在本页面打开链接

锚链接

<a href="#cha01" >跳到第一章</a>
<a name="cha01" >山雨欲来</a>

功能性链接  电子邮件、QQ、MSN等链接

[<a href="mailto:xiahao@126.com">联系夏昊</a>]

地址钱要放mailto:

链接入视频

<video width="300px" height="300px" controls autoplay 自动播放>
    <source src="video/video.webm" type="video/webm">
    <source src="video/video.mp4" type="video/mp4">
    您的浏览器不支持播放视频
</video>

Controls 表示显示控制面板

链接入音频

<audio  controls>
    <source src="music/music.mp3" type="audio/mpeg">
    <source src="music/music.ogg" type="audio/ogg">
    您的浏览器不支持音频
</audio>

表格

 <tr>代表行  <td>代表列

在表格中colspan="3"代表跨列 rowspan="2"代表跨行

列

<table>
      <tr>
          <td colspan="3">成绩表</td>
      </tr>
      <tr>
          <td rowspan="2">张三</td>
      </tr>
  </table>

无序列表

以<li>标签标示列表项 无序列表中的每项都是平级的，没有级别之分，并且列表中的内

容一般都是相对简单的标题性质的网页内容

<ul>

       <li></li>

</ul>

有序列表

  以<li>标签标示列表项 有序列表ol-li一般用于带有顺序编号的特定场合

<ol>

   <li></li>

</ol>

定义类表

  以<dt>标签定义列表项 以<dd>标签定义内容  定义列表一般用于带有标题和标题解释性内容的场合  

<dl>

<dt> 标题</dt>

<dd>列表项</dd>

    </dl>

列表的样式

值	说明	语法试列
none	无标记符号	List-style:none; List-style-image; | position
disc	空心圆，默认类型	List-style-type:disc;
circle	空心圆	List-style-type:circle;
square	实心正方形	List-style-type:square;
decimal	数字	List-style-type:decimal;

 

 

 

 

HTML5的结构元素：

元素名	描  述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

列：<header><h2>网页头部</h2> </header>

     <section><h2>网页主体部分</h2></section>

<footer><h2>网页底部</h2></footer>

表单

表单的基本结构:

<form  method="post" action="result.html">

   <p>  名字：<input name="name" type="text" >  </p>

   <p>  密码：<input name="pass" type="password" >  </p>

   <p>

      <input type="submit" name="Button" value="提交">

      <input type="reset" name="Reset" value="重填">

   </p>

</form>

Method: 发送表单数据的方式常用值：get  | post

post方式提交的数据安全性要明显高于get方式提交的数据。因此在实际开发中通常采用

post方式提交表单数据。

Action: 向何处发送表单数据

表单的元素:

属性	说明
type	元素类型：text文字：password密码：checkbox 复选框、radio单选选框、submit提交按钮、reset重置按钮、file选择按钮、image图片按钮，button普通按钮，hidden 隐藏域，默认为 text Email 邮箱文本框 number 数字 number数字文本框search 搜索框 hidden 隐藏域 readonly 只读文本框 disabled 禁用
size	元素的宽度，当 type 为 text 或 password时
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中
name	指定表单的名称
value	元素的初始值 type为radio时必须指定一个值

 

在form表中用提交元素是要在form后面注入地址和提交方式

<form action="../demo03.html"  method="post" </form>

 选择框

         

列：

<p>性别<input type="radio" name="sex">男<input type="radio" name="sex">女 </p>

下拉列表框:

<select name="名称" size="行数">

<option value="值" selected="selected">

     …

</option >

<option value="值">…</option>

</select>

selected="selected"设置默认值”

列

 <p>城市(下拉列表)：

        <select name="city">

          <option value="1">北京</option>

          <option value="2" selected="selected">上海</option>

          <option value="南京">南京</option>

          <option value="河北">河北</option>

          </select>

</p>

 

多行文本域:

<textarea name=”showText” cols=”x” rows=”y”>文本内容</txtarea>

textarea 多行文本域

Cols 显示的列数

Rows显示的行数

 

多行文本框

<p>个人简介(多行文本框)：<textarea cols="30" rows="10" name="area">个人喜欢玩电脑，性格开朗，活泼好动~~~~~~</textarea></p>

 

  Cols列数

Rows 行数

数字文本框

<input type=”number” name=”mum” min=”0” max=”100” step=”10”/>

Min允许的最小值

Max允许的最大值

Step合法的数字间隔

搜索框

  <input type=”search” name=”sousuo”/>

<input type=”submit” value=”Go”/>

隐藏域

<input type=”hidden” value=”66” name=”userid”>

只读文本框

<input name=”name” type=”text” value=”张三” readonly>

禁用

<input type=”submit” value=”修改” disabled | disabled=”disabled”>

表单元素的标注

  增强鼠标的可用性 自动将焦点转移到与该焦点标注相关的表单元素上

  <label for=”id”>标注的文本</label>

  <input type=”radio” name=”gender” id=”male”>

列

<label for=”pass1”>密码</label><input name=”pass” type=”password” id=”pass1”>