IT虾米网

html 常用标签及基本用法

qq123 2022年05月09日 程序员 160 0

一个网页基本是由 结构(html) + 样式(css) + 脚本(js) 组成。
学习的话 应该从最基本的标签开始, 结构清晰了, 再用css美化, 最后可以用脚本加上特效

块级 和 行类标签

特点: 
1. 宽度自适应父级,总是从新的一行开始。 行内的,不会折行。 
<div> 
    <div>123</div> 
    <div>123</div> 
</div> 
<a>行1</a> 
<a>行2</a> 
<a>行3</a> 
 
2. 高度,宽度...都可以自行控制. 而行类元素 则不能设置。 
<div style="width:300px;height:200px;"></div> 
// 无效 
<span  style="width:300px;height:200px;"></span> 
 
3.行内元素 和 块级元素是可以转变的 
// 比2多了 display:block 有效 
<span  style="width:300px;height:200px;display:block"></span> 
display: inline(行) / inline-block(行块--兼具二者好处) / block(块)

常用块元素

// 最基本的--div 
<div>我是最基本的标签div, 啥都能放,比如嵌套内容, 比如放图片, 段落...</div> 
 
// 段落--p 
<p>我是段落标签, 我一般放文字...</P> 
 
// 标题 h1,h2...h6 
<h3>一般用来放标题</h3> 
 
// 有序列表--ul 和 无序列表--ol 一般和li配合起来使用 有何不同?拿到浏览器上一看就知。 
<ul> 
    <li>首页</li> 
    <li>招聘</li> 
    <li>关于</li> 
</ul> 
<ol> 
    <li>首页</li> 
    <li>招聘</li> 
    <li>关于</li> 
</ol> 
 
// 表格--table 
// tr代表一行 td代表一格 
<table> 
    // 表头--thead tabel(表单)的head(头) 
    <thead> 
        <tr> 
            <td>岗位</td> 
            <td>人数</td> 
            <td>要求</td> 
        <tr> 
    <thead> 
    // 表身--tbody 
    <tbody> 
        <tr> 
            <td>设计</td> 
            <td>1</td> 
            <td>美女</td>  
        </tr> 
        <tr> 
            <td>前端</td> 
            <td>1</td> 
            <td>帅哥</td>  
        </tr> 
    <tbody>    
<table>

常用的行类元素

// 锚点--a 点击可以跳转到指定的链接 
<a href="http://www.baidu.com"></a> 
 
// 输入框--input 
<input type="text" placeholder="请输入文本"> 
 
// 多行文本 
<textarea></textarea> 
 
// 图片--img 
<img src="https://img11.360buyimg.com/n4/s130x130_jfs/t5605/44/3506681813/377317/f4addf34/593e1209Nacbe2e64.jpg" alt="鼠标划入会显示的文字" /> 
 
// 万能??--span 
<span>我经常被用到</span> 
 
// 还有一些其他的 如 
<em>斜体</em> 
<strong>加粗</strong> 
...

常用学校网站 w3c, 菜鸟教程... 有一定基础了 可以去慕课网...


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Web最佳实践阅读总结(1)