Web-HTML和CSS

HTML和CSS

HTML

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

文本相关标签

1. 内容标题h1-h6

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

2. 段落标签p

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

3. 水平分割线hr

4. 换行br

5. 加粗b

6. 斜体i

7. 下划线u

8. 删除线s

列表标签

• 无序列表:ul和li
• 有序列表:ol和li
• 列表镶嵌:有序列表和无序列表可以任意无限嵌套

图片标签img

• src:资源路径

  • 相对路径: 访问站内资源
    • 资源和页面同级目录: 直接写文件名
    • 资源在页面的上级目录: …/文件名
    • 资源在页面的下级目录: 文件夹名/文件名
  • 绝对路径:访问站外资源时使用, 称为图片盗链, 有找不到图片的风险

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

• title: 图片标题

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

  缩放

超链接a

• 相关标签: table , caption表格标题 ,tr表示行, td表示列, th 表示表头
• 相关属性: border边框 rowspan跨行 colspan 跨列

表单form

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

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

• 相关代码：

<!--action设置提交地址--> 
    <form action="http://www.tmooc.cn">
    <!--placeholder占位文本 maxlength最大字符长度
 value设置初始值 readonly只读--> 5 用户名:<input type="text" maxlength="5" value="abc" readonly 6 name="username" placeholder="请输入用户名"><br> 7 密码:<input type="password" name="password" placeholder="请输入密码"><br > 8 <!--单选框的value属性必须写 否则提交的是on 9 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样式代码分离

  开, 学习过程中内部用的多

选择器

1. 标签名选择器: 选取页面中所有同名标签

• 格式: 标签名{样式代码}

2. id选择器: 当需要选择页面中某一个元素时使用

• 格式: #id{样式代码}

3. 类选择器: 当需要选择页面中多个不相关的元素时,给多个元素添加相同的class,然后通过类

   选择器进行选择

• 格式: .class{样式代码}

4. 分组选择器: 将多个选择器合并成一个选择器

• 格式: h1,#id,.class{样式代码}

5. 属性选择器: 通过元素的属性选择元素

• 格式: 标签名[属性名=‘值’]{样式代码}

6. 任意元素选择器: 匹配页面中所有的元素

• 格式: *{样式代码}

7. 子孙后代选择器: 通过元素和元素之间的关系选择

• 格式: body div p{样式代码}

  匹配body里面的div里面的所有p包括后代p

8. 子元素选择器: 通过元素和元素之间的关系选择

• 格式: body>div>p{样式代码}

匹配body里面的div里面的p子元素 不包含后代p

9. 伪类选择器: 此选择的是元素的状态,包括：未访问,访问过,悬停,点击

• 格式: a:link/visited/hover/active{样式代码}