10分钟教你学通HTML

相关概念

head

基本骨架

<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
    </head>
    <body> 

    </body>
</html>

头部

描述属性,不展示给用户

<!--页面标题-->
<title>有且必须只有一个</title>
<!--定义元素-->
<meta charset="编码格式">
<meta http-equiv="指定兼容模式、字符集、refresh" content="浏览器、页面尺寸">
<meta name="" >
<!--外部关联-->
<link rel="stylesheet|icon|preload" href="">
1. 外部样式表
2. 页面图标
3. 预加载元素
<!--加载脚本-->
<script src="">内容</script>
<!--加载样式-->
<stlye src="">内容</stlye>

根元素

文本,样式,交互,展示给用户

<!--块元素-->
<div>
    <span>
        <!--内容-->
    </span>
</div>
<!--加载脚本-->
<script src="">内容</script>
<!--加载样式-->
<stlye src="">内容</stlye>

body

标签可以内部嵌套

name="" 属性用于描述元素内容

src="" 资源路径

段落

<!--标题-->
<h1 align="left | center | right">标题位置</h1>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落-->
<p>这是一个段落 </p> 
<p>这是另一个段落</p>
<br>换行后的文本<br>
<p>这个是<br>不用写p<br>的新段落</p>
<!--水平线-->
<hr color="" width="" size="" align=""/>
1. color:设置水平线的颜色
2. width:设置水平线的宽度
3. size:设置水平线的高度
4. align:设置水平线的对齐方式(默认居中),可取值left|right

常用元素

<!--图片-->
<img src="" alt="" title="" width="" height="">
1. src:路径(图片地址与名字)
2. alt:规定图像的替代文本
3. width:规定图像的宽度
4. height:规定图像的高度
5. title:鼠标悬停在图片上给予提示
<!--超链接-->
<a href="url">链接文本</a>
href:链接地址
<!--列表-->
<ol type="1|A|a|i|I">
    <li>有序</li>
    <li>列表</li>
</ol>
<ul type="disc|circle|square|none>">
    <li>无序</li>
    <li>列表</li>
</ul>
1. disc 默认实心圆
2. circle 空心圆
3. square 小方块
4. none 不显示
5. i 小写罗马数字
6. I 大写罗马数字
<!--表格-->
<table  border="" width="px" height="px">
    <tr colspan="2" rowspan="2">
        <tthread>
            <td>表头格子1</td>
        	<td>表头格子2</td>
        </tthread>
    </tr>
    <tr>
        <tbody>
            <td>第二行(主体)格1</td>
            <td>第二行格2</td>        
        </tbody>
    </tr>
    <tr>
        <tfoot>
            <td>表尾格1</td>
            <td>表尾格2</td>        
        </tfoot>
    </tr>
</table>
1. border:设置表格的边框
2. width:设置表格的宽度
3. height:设置表格的高度
4. colspan:水平表格合并
5. rowspan:竖直表格合并
<!--导航、章节、侧边栏、页脚、帖子块-->
<nav></nav>
<section></section>
<aside></aside>
<footer></footer>
<article></article>

内联

<!--斜体-->
<em>强调</em>
<i>专有名词</i>
<!--粗体-->
<b>注意</b>
<strong>重要</strong>
<!--删除线-->
<del>删除</del>
<!--包裹元素-->
<span></span>

控件

<!--表单-->
<form action="url" method="get|post" name="formName">
	<input type="text|password|checkbox|radio|submit|reset|button|file|date|range|email">
    <input type="submit" value="定义默认值">
</form>
1. checkbox 复选框(多个选项中选择)
2. radio 单选按钮
3. file 上传文件
4. hidden 隐藏字段
5. date、time、month、week、datetime、datetime-local 用户输入、选择时间
6. range 滑动条
7. email 输入邮箱
<!--按钮-->
<botton type="" disabled name="" value="">按钮文本</botton>
<!--菜单-->
<ul>
    <il href="#"></il>
    <il href="#"></il>
</ul>

块级元素

<!--块级-->
<div>
    h1~h6、hr、p、table、ul
    <form>
	</form>
</div>
<!--行内块-->
button、img、input
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值