Web01-HTML/CSS

teyruthy

于 2022-10-04 12:54:26 发布

阅读量90

点赞数

分类专栏： Web 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_70887819/article/details/127161178

版权

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Web前端: 通俗的说就是学习如何开发页面

HTML

Hyper Text Markup Language: 超文本标记语言
超文本: 指不仅仅是纯文本还包括字体相关和多媒体相关(图片,音频,视频)
作用: 负责搭建页面结构和准备页面内容, 相当于盖房子(毛坯房)
学习HTML主要学习的就是有哪些标签,以及标签的使用方式

文本相关标签

内容标题h1-h6

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

段落标签p

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

水平分割线hr
换行br
加粗b
斜体i
下划线u
删除线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 导航

CSS

Cascading Style Sheet层叠样式表: 美化页面 (装修)

如何在html页面中添加CSS样式代码

三种引入方式:
- 内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用
- 内部样式: 在head标签里面添加style标签, 标签体内写样式代码, 可以复用但是只能在当前页面复用不能多页面复用
- 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用
工作中外部引入方式用的多,因为可以多页面复用而且可以将html代码和CSS样式代码分离开, 学习过程中内部用的多