前端html的简单认识

一.html

　　超文本标记语言 hypertext markup language

二.html的结构

三.html标签格式

1.标签由<>把关键字括起来

2.标签通常是成对出现的 , eg <div></div>　　第一个开始标识,第二个有/的是结束标识

　　<标签名 属性1="值1" 属性2="值2">内容部分</标签名>

3.标签也有单独出现的, eg <br/>,<hr/>

　　<标签名 属性1="值1" 属性2="值2"/>

四.html的属性

1.id　　　　定义标签的唯一id

2.class　　  为html元素定义一个或者多个类名

3.style　　　规定行内的样式

五.body中的常用标签

1.标签的嵌套

　　通常块级标签可以包含内联标签,但是内联标签不能包含块级标签,p标签比较特殊,不能包含p标签也不能包含块级标签

2.行内标签

内联

<b>加粗</b> 

<i>斜体</i>

<u>下划线</u>

<s>删除</s>

标签

3.块级标签

<p>段落</p>

<h1>一级标题</h1>
<h2>二级标题</h2>  # 共有6级标题

块级标签

4.特殊字符

空格        &nbsp
<           &lt
>            &gt
&            &amp
版权符     &copy
注册符      &reg

几个特殊字符

5.div标签

　　div标签用来定义一个块级标签,通过css来修改样式

6.span标签

　　span标签用来定义一个内联标签,通过css来修饰样式

7.img标签

　　img标签是用来定义图片的

<img scr="图片的路径" alt="图片未加载出来时的提示" title="鼠标停留时显示的信息" width="宽度" height="高度">

8.a标签

　　a标签是定义超链接的

<a href="url(或锚)" target="_blank">
点我
</a>
锚 指向页面中的锚(href="#top") 跳转 top是标签的id
target属性     _blank 在空白页打开
                   _self 在当前页面打开,默认的     

9.ul标签

　　ul是一个无序的列表

<ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
<ul/>
type属性: disc    实心圆(默认)    circle   空心圆
               square   实心方块        none 什么都没有　

10.ol标签

　　ol是一个有序列表

<ol type="1" start="2">
    <li>第一项</li>
    <li>第二项</li>
</ol>
type属性
    1 数字列表(默认)  A 大写字母  a 小写字母    I 大写罗马数字    i 小写罗马数字

11.dl标签

　　dl是标题列表

<dl>
     <dt>标题</dt>
     <dd>内容</dd>
</dl>

12.table标签

　　table表格标签

<table border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>hobby</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>1</td>
        <td>alex</td>
        <td>chi</td>
    </tr>
    </tbody>

table标签格式

　　table属性

　　　　border　　　　表格边框

　　　　cell padding　　内边距

　　　　cell spacing　　外边距

　　　　width　　　　　宽度

　　td属性

　　　　rowspan　　　　合并行(上下合并)　　

　　　　colspan　　　　合并列(左右合并)

13.input标签

<input type="text">

　　type属性

　　其他属性

　　　　name:表单提交时的键

　　　　value:表单提交时对应的值

　　　　　　type="button" "reset" "submit"　　为按钮上显示的文本内容

　　　　　　type="text" "password" "hidden"　 为输入框的输入的值

　　　　　　type="checkbox" "radio" "file"　　　为输入相关联的值

14.select标签

<select name="" id="">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
</select>

　　属性

　　multiple:设置为多选

　　disabled:禁用

　　selected:默认

　　value:定义提交时的选项值

15.label标签

　　和其他标签进行绑定,点击label标签也能触发点击其他标签的效果

<label for="username">用户名:</label>
<input type="text" id="username">
<label for="pwd">密码:</label>    //for绑定
<input type="text" id="pwd">

16.textarea标签

<textarea name="memo" id="memo" cols="30" rows="10">
    默认内容
</textarea>
属性
    name: 名称    rows: 行数    cols: 列数    disabled: 禁用

16.form标签

　　用于向服务器传输数据,从而实现用户与web服务器的交互

　　包含 input　　select　　label　　textarea

属性