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.   空 格
2. < <
3. > >
4. &quto; “ markdown不识别可能
5. © ©

七 图片标签

1. <img src="" />
   • src: 指定图片路径 相对引用:以当前网页路径作为参考位置,了解. 和.. 绝对引用: 例如 https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super
   • width height
   • title: 鼠标放到图片上的悬浮文字提示
   • alt: 图片不能正常显示 替换图片的文

八 超链接

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

九 列表

1. 无序列表

   <ul>
   <li>桔子</li>
   <li>香蕉</li>
   <li>苹果</li>
   </ul>

   如

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

2. 有序列表

   1. h<ol>
      <li>桔子</li>
      <li>香蕉</li>
      <li>苹果</li>
      </ol>
         	如
            
         <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>

   我爱你	你爱我
   我和你	你和我

3. border 边框(数px) width height

4. 表格对齐

5. 单元格对齐

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

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

7. 跨行跨列

   • 跨列 水平合并

     <table>
     	<tr>
     		<td colspan="2">你我</td>
     	</tr>
     	<tr>
     		<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一起用

     <frameset rows="20%,20%,*"><!-- cols 也可以px -->
     	<frame />
     	<frame />
     	<frame />
     </frameset>

     <frameset rows="20%,*"><!-- cols 也可以px -->
     	<frame />
     		<frameset cols="20%,*">
     			<frame />
     			<frame />
     		</frameset>
     </frameset>

   • 准备页面

   • 关联页面 src

     <frameset rows="20%,*"><!-- cols 也可以px -->
     	<frame src=""/>
     		<frameset cols="20%,*">
     			<frame src=""/>
     			<frame src=""/>
     		</frameset>
     </frameset>

   • 指定目标位置 给frame起一个名字

     <frameset rows="20%,*"><!-- cols 也可以px -->
     	<frame src="" name="名字"/>
     		<frameset cols="20%,*">
     			<frame src="" name="名字"/>
     			<frame src="" name="名字"/>
     		</frameset>
     </frameset>

     <a href="" target="名字">链接焦点</a>

2. 禁止拖动 noresize="noresize" 没有滚动条 scrolling="no"

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

   
   

十二 表单 表单元素

1. • 表单: 嵌套表单元素 填写的数据以一个表单整体提交
   • 表单元素: 文本框 密码框 单选框 复选框 下拉列表

2. <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>

   名字:

   密码:

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

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

   • password:

   • ‘radio’ : 单选 如

     <input type="radio" name ="gender"/>男 <!-- 不加name 不能识别为一组 无法控制 -->
     <input type="radio" name ="gender"/>女 <!-- 加上value可提交 否则为on -->

     男 女

   • checkbox : 复选 参上

   • 按钮 :

     • 提交 : submit
     • 重置 : reset
     • 普通 : button 可自定义任何功能
     • 图片 : img src="" 默认有提交功能

   • 文件域 : file 要用post 要有enctype="" 可以是 multipart /form-data多部件

5. 下拉 :

<select name="">
	<option>A</option> <!-- 有value 传value的值 无value 传中间的值
	<option>B</option>
	<option>C</option> <!-- 默认选中 selected="selected" --> 
	<option>D</option>
</select>

A B C D

6. 多行文本域

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

   写字

十三 表单高级应用

1. 隐藏域 不给用户看

   <iptut type ="hidden" name="" value=""/>

2. 只读和禁用 readnoly="readonly" 一般用于文本框 disabled="disabled" 一般用于按钮

3. 语义化 没什么用

   <form>
   	<fieldset>
   	<legend>用户信息</legend>
   	姓名 : <input type="text"/>
   	</fieldset>
   </form>

   用户信息

   姓名 :

4. • 所有标签可以加 id 和 name

     • id: 同一个页面不能出现相同的id
     • name: 可以重复

   • <form><!-- 增强用户体验 符合规范 --><!-- 点击名字 光标跳到文本框 -->
         <fieldset>
         <legend>用户信息</legend>
         <label for="uname">姓名 : </lable>
         <input type="text" id="uname"/>
         </fieldset>
     </form>
     

     用户信息

     姓名 :