HTML简单笔记

w3c

# 系列链接

HTML简单笔记

CSS简单笔记

JavaScript简单笔记

jQuery简单笔记

拓展简单笔记

一 标题标签

  1. <h1>一级标题</h1>

  2. <h2>二级标题</h2>

  3. <h3>三级标题</h3>

  4. <h4>四级标题</h4>

  5. <h5>五级标题</h5>

  6. <h6>六级标题</h6>

  7. <h7>七级标题</h7> 没有

二 段落标签

  1. <p>段落</p>

三`标签

  1. <br/>

四 水平线标签

  1. <hr />

五 加粗和斜体

  1. <strong>加粗</strong> 加粗
  2. <b>加粗</b> 加粗
  3. <em>斜体</em> 斜体
  4. <i>斜体</i> 斜体
  5. <font size="3" color="red">字体标签</font> 字体标签
  6. 按照标准不建议用 有样式 css来控制 自己怎么方便怎么用

六 特殊符号 (网页显示一些东西)

  1. &nbsp; 空 格
  2. &lt; <
  3. &gt; >
  4. &quto; " markdown不识别可能
  5. &copy; ©

七 图片标签

  1. <img src="" />

八 超链接

  1. <a href="">链接焦点 图片or文字</a> 超链接
    • target: _self:默认值 _blank:新窗口
    • 锚链接: 当前页面跳转 先在目标地写<a name="锚名字"></a> 然后点击<a href="#锚名字"></a> # 浏览器解释回到最上面 例如: 顶部w3c
    • 功能链接: 可以启动第三方软件 有特定格式 例如 <a href="mailto:[email protected]">联系我</a> 联系我

九 列表

  1. 无序列表

    1
    2
    3
    4
    5
    <ul>
    <li>桔子</li>
    <li>香蕉</li>
    <li>苹果</li>
    </ul>

    • 桔子
    • 香蕉
    • 苹果
    1. type: square: 正方形 disc: 实心圈(网页默认) circle: 空心圈
  2. 有序列表

    1. h<ol>
      <li>桔子</li>
      <li>香蕉</li>
      <li>苹果</li>
      </ol>
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14


      <ol><li>桔子</li><li>香蕉</li><li>苹果</li></ol>
      2. type: A <font color ="green">or</font> a I <font color ="green">or</font> i

      3. 定义列表(常来用来做图文混排)

      1. ```html
      <dl>
      <dt>水果:</dt>
      <dd>桔子</dd>
      <dd>香蕉</dd>
      <dd>苹果</dd>
      </dl>
      <dl> <dt>水果:</dt> <dd>桔子</dd> <dd>香蕉</dd> <dd>苹果</dd> </dl>

十 表格布局 (DIV 框架布局后面再说)

  1. 规整排列数据

  2. <table>//网页默认没有边框
    	<tr>//行
    		<td>我爱你</td>//列
    		<td>你爱我</td>
    	</tr>
    	<tr>
    		<td>我和你</td>
    		<td>你和我</td>
    	</tr>
    </table>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56

    <table>
    <tr>
    <td>我爱你</td>
    <td>你爱我</td>
    </tr>
    <tr>
    <td>我和你</td>
    <td>你和我</td>
    </tr>
    </table>

    3. border 边框(数`px`) width height

    4. 表格对齐

    5. 单元格对齐

    <table>
    <tr>
    <td>属性</td>
    <td>值</td>
    <td>说明</td>
    </tr>
    <tr>
    <td>align<br />水平对齐方式</td>
    <td>left<br />center<br />right</td>
    <td>左对齐<br/>居中对齐<br />右对齐</td>
    </tr>
    <tr>
    <td>valign<br />垂直对齐方式</td>
    <td>top<br />middle<br />bottom<br />baseline</td>
    <td>顶端对齐<br/>居中对齐<br />低端对齐<br />基线对齐</td>
    </tr>
    </table>

    6. 好多地方都可以用上面的东西 就近原则

    7. 跨行跨列

    - 跨列 水平合并

    ```html
    <table>
    <tr>
    <td colspan="2">你我</td>
    </tr>
    <tr>
    <td>我爱你</td>
    <td>你爱我</td>
    </tr>
    <tr>
    <td>我和你</td>
    <td>你和我</td>
    </tr>
    </table>
    <table> <tr> <td colspan="2">你我</td> </tr> <tr> <td>我爱你</td> <td>你爱我</td> </tr> <tr> <td>我和你</td> <td>你和我</td> </tr> </table> - 跨行 垂直合并
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <table>
    <tr>
    <td rowspan="2">你我</td>
    <td>我爱你</td>
    <td>你爱我</td>
    </tr>
    <tr>
    <td>我和你</td>
    <td>你和我</td>
    </tr>
    </table>
    <table> <tr> <td rowspan="2">你我</td> <td>我爱你</td> <td>你爱我</td> </tr> <tr> <td>我和你</td> <td>你和我</td> </tr> </table> - 两跨 自己专研

十一 框架布局

  1. 将一个页面分成若干个部分,每个部分嵌套一个页面 一般用来做后台管理页面(回忆某次java实践)

    • 分页面 frameset不能和body一起用

      1
      2
      3
      4
      5
      <frameset rows="20%,20%,*"><!-- cols 也可以px -->
      <frame />
      <frame />
      <frame />
      </frameset>
      1
      2
      3
      4
      5
      6
      7
      <frameset rows="20%,*"><!-- cols 也可以px -->
      <frame />
      <frameset cols="20%,*">
      <frame />
      <frame />
      </frameset>
      </frameset>
    • 准备页面

    • 关联页面 src

      1
      2
      3
      4
      5
      6
      7
      <frameset rows="20%,*"><!-- cols 也可以px -->
      <frame src=""/>
      <frameset cols="20%,*">
      <frame src=""/>
      <frame src=""/>
      </frameset>
      </frameset>
    • 指定目标位置 给frame起一个名字

      1
      2
      3
      4
      5
      6
      7
      <frameset rows="20%,*"><!-- cols 也可以px -->
      <frame src="" name="名字"/>
      <frameset cols="20%,*">
      <frame src="" name="名字"/>
      <frame src="" name="名字"/>
      </frameset>
      </frameset>
      1
      <a href="" target="名字">链接焦点</a>
  2. 禁止拖动 noresize="noresize" 没有滚动条 scrolling="no"

  3. 子框架 <iframe src=""></iframe>可以把页面加进来 页面复用 可以在body里用


十二 表单 表单元素

    • 表单: 嵌套表单元素 填写的数据以一个表单整体提交
    • 表单元素: 文本框 密码框 单选框 复选框 下拉列表
  1. <form method="post/get" action="某html等"> <!-- 默认get action:指定数据提交到服务器后由谁处理--> 
    <p> 名字: <input name="name" type="text"/> </p> <!-- 也可以用<br />-->
    <p> 密码: <input name="password" type="password"/> </p>
    <p> 
    	<input type="submit" name="Button" value="提交"/> <!-- 不传 一般不加name-->
    	<input type="reset" name="Reset" value="重填"/>
    </p>
    </form>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

    <form method="get" action="某html">
    <p> 名字: <input name="name" type="text"/> </p>
    <p> 密码: <input name="password" type="password"/> </p>
    <p>
    <input type="submit" name="Button" value="提交"/>
    <input type="reset" name="Reset" value="重填"/>
    </p>
    </form>

    3. 有`name`的表单元素才会提交

    4. - `text` : `size` 文本框长度 `maxlength` 可输入最大字符

    - `password`:

    - 'radio' : 单选 如

    ```html
    <input type="radio" name ="gender"/>男 <!-- 不加name 不能识别为一组 无法控制 -->
    <input type="radio" name ="gender"/>女 <!-- 加上value可提交 否则为on -->
    <form> <input type="radio" name ="gender"/><input type="radio" name ="gender"/></form> - `checkbox` : 复选 参上 - 按钮 : - 提交 : `submit` - 重置 : `reset` - 普通 : `button` 可自定义任何功能 - 图片 : `img` `src=""` 默认有提交功能 - 文件域 : `file` 要用`post` 要有`enctype=""` 可以是 `multipart /form-data`多部件
  2. 下拉 :

1
2
3
4
5
6
<select name="">
<option>A</option> <!-- 有value 传value的值 无value 传中间的值
<option>B</option>
<option>C</option> <!-- 默认选中 selected="selected" -->
<option>D</option>
</select>
  1. 多行文本域

    1
    <textarea rows="5" cols="10">写字</textarea>

十三 表单高级应用

  1. 隐藏域 不给用户看

    1
    <iptut type ="hidden" name="" value=""/>
  2. 只读和禁用 readnoly="readonly" 一般用于文本框 disabled="disabled" 一般用于按钮

  3. 语义化 没什么用

    1
    2
    3
    4
    5
    6
    <form>
    <fieldset>
    <legend>用户信息</legend>
    姓名 : <input type="text"/>
    </fieldset>
    </form>
    用户信息 姓名 :
    • 所有标签可以加 idname

      • id: 同一个页面不能出现相同的id
      • name: 可以重复
    • <form><!-- 增强用户体验 符合规范 --><!-- 点击名字 光标跳到文本框 -->
      	<fieldset>
      	<legend>用户信息</legend>
      	<label for="uname">姓名 : </lable>
      	<input type="text" id="uname"/>
      	</fieldset>
      </form>
      
      用户信息