Html入门

HTML

  • Hyper Text Markup Language: 超文本标记语言

  • 超文本: 指不仅仅是纯文本还包括字体相关和多媒体相关(图片,音频,视频)

  • 作用: 负责搭建页面结构和准备页面内容, 相当于盖房子(毛坯房)

  • 学习HTML主要学习的就是有哪些标签,以及标签的使用方式

文本相关标签

  1. 内容标题h1-h6

特点: 独占一行, 字体加粗, 自带上下间距

  1. 段落标签p

特点: 独占一行, 自带上下间距

  1. 水平分割线hr

  2. 换行br

  3. 加粗b

  4. 斜体i

  5. 下划线u

  6. 删除线s

列表标签

  • 无序列表: ul和li

  • 有序列表: ol和li

  • 列表嵌套: 有序列表和无序列表可以任意无限嵌套

图片标签img

  • src:资源路径

    • 相对路径: 访问站内资源

      • 资源和页面同级目录: 直接写文件名

      • 资源在页面的上级目录: ../文件名

      • 资源在页面的下级目录: 文件夹名/文件名

    • 绝对路径:访问站外资源时使用, 称为图片盗链, 有找不到图片的风险

  • alt:当图片不能显示时显示的文本

  • title: 图片标题

  • width/height: 设置宽高, 两种赋值方式: 像素和百分比, 只设置宽度时高度会自动等比例缩放

超链接a

  • href: 设置资源路径 和图片标签的src属性类似

  • a标签包裹文本为文本超链接, 包裹图片为图片超链接

表格标签table

  • 相关标签: table , caption表格标题 ,tr表示行, td表示列, th 表示表头

  • 相关属性: border边框 rowspan跨行 colspan 跨列

表单form

  • 作用: 获取用户输入的各种信息并提交给服务器

  • 学习form表单就是学习form表单中有哪些控件.

  • 相关代码:

  • <form action="http://www.tmooc.cn">

    <!--placeholder占位文本 maxlength最大字符长度

    value设置初始值 readonly只读-->

    用户名:<input type="text" maxlength="5" value="abc" readonly

    name="username" placeholder="请输入用户名"><br>

    密码:<input type="password" name="password" placeholder="请输入密码"><br>

    <!--单选框的value属性必须写 否则提交的是on

    checked设置默认选中-->

    性别:<input type="radio" checked name="gender" value="m" id="r1">

    <label for="r1"></label>

    <input type="radio" name="gender" value="w" id="r2">

    <label for="r2"></label><br>

    <!--多选框和单选框的属性通用-->

    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟

    <input type="checkbox" name="hobby" value="hj">喝酒

    <input type="checkbox" name="hobby" checked value="tt">烫头<br>

    生日:<input type="date" name="birthday"><br>

    靓照:<input type="file" name="pic"><br>

    城市:

    <select name="city">

    <option value="bj">北京</option>

    <option value="sh" selected>上海</option>

    <option value="gz">广州</option>

    </select><br>

    <input type="submit" value="注册">

    <!--重置按钮-->

    <input type="reset">

    <!--自定义按钮-->

    <input type="button" value="自定义">

    </form>

    分区标签

    • 分区标签可以理解为一个容器,用来装多个有相关性的标签, 对多个标签进行统一管理

    • 如何对页面进行分区?

    一个页面至少分为3大区: 头 体 脚 , 每个大区里面有n个小的分区

    • 常见的分区标签:

      • div: 块级分区标签, 特点: 独占一行

      • span: 行内分区标签, 特点: 共占一行

    • HTML5版本新增加的几个分区标签,作用和div一样,目的是为了提高代码可读性

      • header 头

      • main 主体

      • footer 脚

      • section 区域

      • nav 导航

    <div>头</div> <div>体</div> <div>脚</div> <header></header> <main></main> <footer></footer>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值