前端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

属性

posted @ 2019-01-23 23:38  雾霾1024  阅读(149)  评论(0编辑  收藏  举报