html+css复习笔记

时间：2022-11-14 16:33:27

注：非h5和c3笔记，此复习笔记参考W3Cschool，用来整理知识点

html简介

  • html：超文本标记语言
  • html标签：多为成对出现，成对出现都为一个开始标签一个结束标签;结束标签比开始标签多一个“/”用以区分
    <html></html>

  • html文档：即通常说的网页，浏览器的作用就是将html文档转化为可视化的页面

工具：Visual Studio Code + FireFox


语法

 1.html标题标签

        <h1>1级标题</h1>
        <h2>2级标题</h2>
        <h3>3级标题</h3>
        <h4>4级标题</h4>
        <h5>5级标题</h5>
        <h6>6级标题</h6>

html+css复习笔记

2.段落标签

<p>段落1</p>
<p>段落1</p>
<p>段落1</p>

html+css复习笔记

3.图片标签

<img src="./xxx.jpg" />

该标签具有以下属性：

  1. src:图片路径（图片类型可为静态、动态、网络、本地）
  2. alt:该属指定一段文本，作为该图片的提示信息
  3. height:和width
  4. title:当图片因某些原因加载不出来，就显示该信息

4.超链接标签

<a href="https://www.baidu.com" target="_blank">baidu</a>

baidu

该标签拥有以下属性：

  1. target: 可以选择该连接打开的窗口时再本窗口，还是新窗口
  2. name：锚点，可以通过超链接跳转到该锚点

5.表格

        <table border="1">
            <thead>
                <th>页眉单元格</th>
                <th>页眉单元格</th>
                <th>页眉单元格</th>
            </thead>
            <tbody>
                <td>表体</td>
                <td>表体</td>
                <td>表体</td>
            </tbody>
            <tfoot>
                <td colspan="3">表格脚</td>
            </tfoot>
        </table>
页眉单元格 页眉单元格 页眉单元格
表格脚
表体 表体 表体

该标签拥有以下该属性：

  1.     rowspan和colspan 合并列、合并行
  2. thead、tbody、tfoot 表格页眉、表格体、表格脚除去thead嵌套<th.../>标签外，其他嵌套<td .../>
  3. align: align="center"

6.更换背景

修改背景颜色

<body bgcolor = "red">
修改图片背景 
<body background="http://photos.tuchong.com/274302/f/6993727.jpg">

背景图片插入格式同图片标签;

若背景图片过大会显示不全，反之，会重复使用该图片将页面填充满(该问题可经过css解决)

7.列表

        <ul>
            <li>无须列表</li>
            <li>无须列表</li>
            <li>无须列表</li>
        </ul>

        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
  • 无须列表
  • 无须列表
  • 无须列表
  1. 有序列表
  2. 有序列表
  3. 有序列表

8.格式标签

        <b>加粗</b>
        <i>倾斜</i>
        <ins>下划线</ins>
        <del>删除线</del>
        10<sup>2</sup>
        CO<sub>2</sub>

效果：

加粗 倾斜 下划线 删除线 102 CO2

9.表单

<from.../>表单标签

该标签重要属性：

  •  action:该属性可指定一个地址，单击提交按钮时，该表单被提交到这个地址。
  • method：指定提交表单时发送何种类型的请求，该属性可为get(不安全)或post(安全)，该属性必填

input元素

< form action = "https://localhost:8080/as/da" method = "GET" >
< input type = "text" name = "user" id = "1" value = "单行文本框" >< br >< br >
< input type = "password" name = "password" id = "2" value = "密码输入框" >< br >< br >
< input type = "radio" name = "radio" id = "3" value = "1" > a
< input type = "radio" name = "radio" id = "4" value = "2" > b < br >< br >
< input type = "file" name = "file" id = "aaa" >
< input type = "submit" value = "提交" >
< input type = "reset" value = "重置" >
< input type = "button" value = "无动作" >
</ form >

下拉框

<select name="select" id="123">
        <option value="1">下拉菜单</option>
        <option value="1">下拉菜单</option>
        <option value="1">下拉菜单</option>
    </select>

下拉菜单下拉菜单下拉菜

textarea定义文本域 

<textarea cols="20" row="2"></textarea>

框架

 <iframe src="https://www.baidu.com" frameborder="0"></iframe>


可再<head.../>标签中使用frameset对框架进行分割

css简介

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 通过css可以改变网站的外观和布局

因为注重点不同：暂不对css做过多的复习

css的三种引入方式

  1.    内联嵌入式    （通过标签stayle属性）
  2.    定义内部类型代码块（在stayle写css代码）
  3.     链入外部代码文件（链入css文件，再css中写样式代码）


标签：

相关文章