前端阶段_html部分

HTML

1.html5的第一行一定是<!DOCTYPE html>,h4太长,而且一般ide中会自动加载,了解即可。

2.h5的整个页面被<html></html>标签包裹着

3.h5的头部被<head></head>标签包裹,中间主要放<title></title>标签,此标签内部是网页的标题

4.h5的网页部分被<body></body>包裹,body中是网页的主体部分

5.头部还通常有一个字符编码标签<meta charset="utf-8"/>为单标签,表示该页面的文字内容是utf-8编码的

6.body内一些常用标签介绍(英文有些是猜测,有些是查找,便于记忆标签)

  

  <hr/>                 水平线标签,horizon

  <br/>                 回车换行标签,break

  <p></p>            段落标签,paragraph

  <!--注释-->           注释标签

   <hn/>              n为1到6,小标题标签,大小由1到6递减,head

  <font/>             规定文本字体标签

  <img src="链接">        图片标签,image

  <ul></ul>            无序列表标签,unorder list

  <ol><ol>            有序列表标签,order list

  <a herf=" "></a>       a标签,一般加上herf,引号里面是链接,a为action

  <table></table>       表格

  <tr></tr>           table row行表格

  <td></td>           table data表格数据,可看做列

  <th></th>           table head表格数据加粗,可看做列

  colspan属性           跨列单元格

  rowspan属性           跨行单元格

7.html的一些表单标签

     <!--
            属性:
            1.提交方式有post和get
            2.name属性取值任意,提交时会提交上去
            3.value值
            4.size长度
            5.maxlength可输入值的最大长度
            6.placeholder占位符
            7.checked默认选中
        -->
        <form action="#" method="get">
            用户名:<input type="text" name="username" /><br /><br />
            密码:<input type="password" name="password"/><br /><br />
            确认密码:<input type="password" name="repassword"/><br /><br />
            性别:<input type="radio" name="sex" value="male"/><input type="radio" name="sex" value="female"/><br /><br />
            爱好:<input type="checkbox" name="habit" value="fish"/>钓鱼
            <input type="checkbox" name="habit" value="game"/>打游戏
            <input type="checkbox" name="habit" value="music"/>听音乐<br /><br />
            头像:<input type="file" name="pic" /><br /><br />
            籍贯:<select name="province">
                <option>--请选择--</option>
                <option value="浙江">--浙江--</option>
                <option value="上海">--上海--</option>
                <option value="江苏">--江苏--</option>
            </select><br /><br />
            自我介绍:
                <textarea name="introduction">
                    一般不使用,用在线文本编辑器,内含表情等
                </textarea><br /><br />
            提交按钮:<button type="submit"></button>
            重置按钮:<button type="reset"></button>
        </form>

注意:表单布局可使用table进行对齐

 

posted @ 2018-07-25 19:25  SteveYu  阅读(243)  评论(0编辑  收藏  举报