HTML Basics Study Notes

HTML Basics Study Notes

• Use the shortcut keys:
  Ctrl + N New Page
  F4 hide all panels
  F12 preview page
  Ctrl + shift + S Save As
  switch editor Ctrl + tab window
• When creating a new, generally built three folders (CSS JS ImagesRF Royalty Free)
  HTML basic grammar
  - title font
  <h1></h1> (uniqueness, the general put on the page logo)
  <h2></h2>subheadings
  <h3></h3>three title
  <h4></h4>four title
  <h5></h5>five title
  <h6></h6>six title
  
  
• Font tag
  <p></p> paragraph mark, a paragraph identifier (the default is no spacing between paragraphs and paragraphs)
  
  
  <i></i>/<em></em>tilt effect of the text
  <b></b>/<strong></strong>the text font bold effect
  <u></u>provided underlined text
  
  - empty flag
  <br/> set the font switch to
  <hr/>add a horizontal
  - character entities
  commonly escape character
  non-breaking space:  
  the right angle bracket>: >
  left angle brackets <: <
  the record icon: ©
  
  
  - list tag
  HTML tag in the list, there are three, namely: disorderly label, sequential label, custom label.

1. Disorderly label

<ul>
   <li></li>
</ul>

2. Ordered Label

<ol>
   <li></li>
</ol>

Two attributes type=”A”/”1”/”i””I”other tables sequential manner
Start property sort start value

eg. <ol  (type=”1”)>
   <li></li>
</ol>
<ol  (start=”3”)>
   <li></li>
</ol>

3. Custom Labels

<dl>
    <dt>名词</dt>  <dd>解释补充名词</dd>
</dl>

- Hyperlinks

<a href=”目标文件路径及全程或者链接地址” title=”提示文本”>链接文本或图片</a>

   <a href=”#”>空连接</a>
  Traget属性定义了打开链接的目标窗口
  —blank在新窗口中打开链接页面（会保留原窗口）
  —self   在当前窗口打开链接页面

- 插入图片
<img src=”图片的路径” border=”边框” alt=”图片替换文字” title=”图片标题” width=” ” height=” ”/>
Title的作用：鼠标悬停在该图片上时显示的信息，鼠标离开了就没有了。
Alt当图片不显示的时候，提示的信息。
相对路径和绝对路径
同级：即当前文件与目标文件下同一目录下，直接书写目标的文件名+拓展名。
上级找下级：即当前文件与目标文3件的文件夹在同一目录下，写法如下：文件夹名/目标文件全称+拓展名
下级找上级：即当前文件所处的文件夹和目标文件在同一目录下，写法如下：…/目标文件名+拓展名
- 常用元素

<div></div>

没有具体含义，统称为块标签，用来设置文本区域，是文档布局常用对象。

<span></span>

文本节点标签 可以是某一小段文字，或者某一个字。
- HTML中的注释

<!—注释内容-->

- 表格

<tr>（一对tr表示一行）
<td></td>（一对td表示一列）
<td></td>
</tr>
</table>

属性
Width=”表格的宽度” height=”表格的高度”
Border=”表格的宽度” boedercolor=”边框颜色”
Cellspcing=”单元格与单元格的间距”（一般设为0）
Cellpadding=”单元格与内容的距离” （一般设为0）
Align=”表格水平对齐方式”
（可写在table整个单元格居中）
（可写在tr，单元格中的内容居中）
取值：left /right /center
valign “垂直对齐”Top\bottom\middle
合并单元格属性：（td）合并列：
colspan”所要合并的单元格的列表”
合并列：rowspan”又要合并单元格的行数”
合并时多余的行和列要删除
- 表单
作用，用来收集用户的信息的
1、 表单框

<form name=”表单名称”  method=”post/get”  action=”路径”></form>

2、 表单控件

<input type=””/>

语法：

<input type=””  name=””  size=”” maxlength=””/>

1. 文本框<input type=”text” value=”20（默认值）”>
2. 密码框<input type=”password”>
3. 提交按钮<input type=”submit” value=”按钮内容”>
4. 重置密码<input type=”reset” value=”按钮内容”>
5. 空按钮<input type=”buttom” value=”按钮内容”>
6. 单击按钮
   男（将两个单选按钮关联起来）
   （默认选中）女
7. 复制框图

<input type=”checkbox”name””>
<input type=”checkbox”name””disabled=”disabled”/>
”disabled=”disabled”（禁用）
checked=”checked”（默认选择）

8. 表单域下拉列表（菜单）
   语法：

<select>
<option>下拉列表1</option>
<option>下拉列表2</option>
</select>

表单域多行文本定义：
语法：

<textarea name=”” cols=”” rows=””></textarea>（可做留言板）

说明：
多行文本，row属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。阻止浏览器对窗口拖动设置：（resize:none;）（css属性）