html 标签学习

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_32808253/article/details/79505499

用标签根据语义,不是根据样式

1 h1-h6 级标签只代表分级,可以通过css中font-size: 100px修改。<h1>hihi</h1>


2 p标签只能嵌入文本,图片,表单。不能放入h1-h6标签。


3 图片标签<img src="938c11e790eb500.jpg" alt="图片"> 


4 链接标签<a href="http://www.baidu.com" title="百度" target="_blank">
百度

   </a>  title是放上去标题,target是打开新一页。

5 链接锚点,用name或id来做锚点,快速跳转

           <a href="#maodian"  >

链接到锚点

    </a>

         <a name="maodian">hi段落锚点</a>
<p>
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
hi
</p>

6 无序列表ul标签,应用场景导航栏,当当网每一本书的信息是一个li,li可以放置任意标签

<p>程序员就业城市</p>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>

</ul>

7 多级列表

<ul>
<li>
<h1>吃的</h1>
<ul>
<li>饼干</li>
<li>花生</li>
</ul>
</li>
<li>
<h1>喝的</h1>
<ul>
<li>可乐</li>
<li>雪碧</li>
</ul>
</li>
<li>
<h1>玩的</h1>
<ul>
<li>滑雪</li>
<li>漂流</li>
</ul>
</li>

</ul>

8 有序列表ol,用的不多一般也用ul

<h4>歌曲排行榜</h4>
<ol>
<li>小苹果</li>
<li>Fade</li>
<li>Plant</li>

</ol>

9 定义列表 dl dt dd,应用场景京东左边分类如手机通讯分类

      <dl>
<dt>北京</dt>
<dd>国家首都</dd>
<dt>上海</dt>
<dd>经济中心</dd>

</dl>

10 div 默认不改变样式,但语义改变了,代表一个区域,通过css改变。span 也代表一个小区域,只能放文本,图片,表单元素。

<style type="text/css">
   div{
    width: 500px;
    height: 150px;
    border: 2px dashed red;
   }
</style>


<div>

<h3>中国主要城市</h3>
<ul>
<li>上海</li>
<li>北京</li>
<li>广州</li>
</ul>

</div>

11  表单元素

        <form action="1.php" method="get">
<p>
<h4>请输入姓名</h4>
<input type="text" value="默认值">
</p>
        <p>
<h4>请输入密码</h4>
<input type="password" >
</p>
<p>

<p>

<label for="nan">男</label><input type="radio" name="sex" check="checked" id="nan">
<label for="nv">女</label><input type="radio" name="sex" id="nv">
</p>
</p>
<p>
<input type="checkbox" name="sex">篮球
</p>
<p>
请选择你喜欢的颜色
<input type="color" name="sex">
</p>
<p>
请选择你的生日
<input type="date" name="sex">

</p>

                <p>
请选择籍贯
<select name="city_list">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</p>
<p>
<textarea  cols="30" rows="10"></textarea>

</p>

                <p>
<input type="button" value="普通按钮">
提交按钮<input type="submit" >
重置按钮<input type="reset" >
</p>

</form>

12  <!-- 这是注释 -->    sublime 注释快捷键 Ctrl+/

    字符实体 &copy;代表版权,换行用p标签不用br标签

浏览器使用统计 http://tongji.baidu.com/data/browser

前端标签进化史

http://2002.sina.com.cn/  用table来搭建网站

http://2010.sina.com.cn/  用div来搭建网站

未完待续。。。。。。

猜你喜欢

转载自blog.csdn.net/qq_32808253/article/details/79505499
今日推荐