Web基础笔记-HTML

分类：菜鸟笔记作者：weixin_70634087

文本相关标签

        1.内容标题： h1-h6

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

        2.换行: br

        3.段落标签p

独占一行, 自带上下间距

        4.水平分割线:hr

        5.加粗b

        6.斜体i

        7.下划线u

        8.删除线s

列表标签

  1. 无序列表: ul和 li 组合

  2. 有序列表: ol和li组合

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>内容<br>标题1</h1>
<h2 align="center">内容标题2</h2>
<h3 align="right">内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<h6>内容标题6</h6>
<hr>
<p>段落标签1</p>
<p>段落标签2</p>
<p>段落标签3</p>
加粗<b>标签</b>
斜体<i>标签</i>
下划线<u>标签</u>
删除线<s>标签</s>

<h1>列表标签</h1>
<h2>无序列表</h2>
<ul><!--unordered  list-->
    <li>刘备</li><!--list item-->
    <li>诸葛亮</li><li>孙尚香</li><li>刘禅</li><li>关羽</li>
</ul>
<h2>有序列表</h2>
<ol>
    <li>Java基础</li>
    <li>Java API</li>
    <li>Web前端</li>
</ol>
<h2>列表嵌套</h2>
<ol>
    <li>凉菜
        <ul>
            <li>拍黄瓜</li><li>花毛一体</li>
        </ul>
    </li>
    <li>炒菜
        <ul>
            <li>宫保鸡丁</li><li>木须肉</li>
        </ul>
    </li>
</ol>


</body>
</html>

 

图片标签

  • src: 资源路径

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

      • 和页面同级目录: 直接写图片名

      • 在页面的上级目录: ../图片名

      • 在页面的下级目录: 文件夹名/图片名

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

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

  • title:图片标题 当鼠标悬停时显示的文本

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--src资源路径:
    相对路径: 访问站内资源时使用
        1. 资源和页面在同一目录:直接写图片名
        2. 资源在页面的上级目录: ../图片名
        3. 资源在页面的下级目录:文件夹名/图片名
    绝对路径:访问站外资源时使用, 也称为图片盗链,有找不到图片的风险
    alt:当图片不能正常显示时显示的文本
    title:图片标题 悬停在图片上显示的内容
    width/height:设置宽高
        1. 像素
        2. 百分比
        如果只设置宽度高度会等比例缩放
    -->
<img src="aa.png" alt="传奇哥的靓照">
<img src="../b.jpg" title="你看我美吗?" width="50%">
<img src="abc/c.jpg" width="300" height="300">
<img src="https://cdn.tmooc.cn/bsfile//courseImg///5f791c0985cc4a67a5c4dca6627155b0.jpg">

</body>
</html>

 

超链接a

  • href: 作用类似图片标签的src

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

  • 页面内部跳转, 在目的地元素里面添加id属性, 然后在超链接的href属性中写#id 这样点击时就可以跳转到目的地元素的位置

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--href资源路径 类似图片标签的src属性-->
<a  href="http://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="a.png">超链接3</a>

<a href="http://www.tmooc.cn">
    <img src="a.png" alt="">
</a>
<img src="../imgs/a.jpg" alt="">
<img id="top" src="../imgs/b.jpg" alt="">
<img src="../imgs/c.jpg" alt="">
<img src="../imgs/d.jpg" alt="">
<img src="../imgs/e.jpg" alt="">
<img src="../imgs/f.jpg" alt="">
<a href="#top">回到顶部</a>


</body>
</html>

表格标签table

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

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1"><!---->
  <tr><!--table row 表示行-->
    <!--colspan跨列-->
    <td colspan="2" align="center">1-1</td><!--table data表格数据 表示列-->
    <!--rowspan跨行-->
    <td rowspan="2">1-3</td><td rowspan="3">1-4</td>
  </tr>
  <tr>
    <td>2-1</td><td>2-2</td>
  </tr>
  <tr>
    <td align="center" colspan="3">3-1</td>
  </tr>
</table>
<table border="1">
  <caption>购物车</caption>
  <tr><!--table head 表头  加粗并居中-->
    <th>编号</th><th>名称</th><th>价格</th>
  </tr>
  <tr>
    <td>1</td><td>康师傅冰红茶</td><td>3元</td>
  </tr>
  <tr>
    <td>2</td><td>小茗同学</td><td>6元</td>
  </tr>
</table>
</body>
</html>

表单form

  • 作用: 获取用户输入的内容并提交给服务器

  • 学习表单主要学习的就是表单中有哪些控件, 包括:文本框,密码框,单选,多选,下拉选,日期,文件等

  • 相关代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--action设置提交地址-->
<form action="http://www.baidu.com">
    <!--placeholder占位文本
    maxlength最大字符长度
    value设置控件的值
    readonly只读-->
    用户名:<input type="text" name="username" maxlength="5" value="tom"
               readonly placeholder="请输入用户名"><br>
    密码:<input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="注册">
</form>
</body>
</html>

 

<form action="http://www.baidu.com">
    <!--placeholder占位文本
    maxlength最大字符长度
    value设置控件的值
    readonly只读-->
    用户名:<input type="text" name="username" maxlength="5" value="tom"
               readonly placeholder="请输入用户名"><br>
    密码:<input type="password" name="password" placeholder="请输入密码"><br>
    <!--value设置提交的值,如果不设置则提交on checked设置默认选中-->
    性别:<input type="radio" name="gender" value="m" id="r1">
    <label for="r1">男</label>
    <input type="radio" name="gender" checked value="w" id="r2">
    <label for="r2">女</label><br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    所在地:
    <select name="city">
        <!--value设置提交的内容,如果不写则提交标签体的内容
        selected设置默认选中-->
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="gz">广州</option>
    </select><br>
    <input type="submit" value="注册">
    <!--重置按钮-->
    <input type="reset" value="重置按钮">
    <!--自定义按钮-->
    <input type="button" value="自定义按钮">
    <hr>
    <button type="submit">注册</button>
    <button type="reset">重置按钮</button>
    <button type="button">自定义按钮</button>
</form>

分区标签

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

  • 常见的分区标签包括:

    • div: 独占一行

    • span: 共占一行

  • HTML5标准中新增的专门用于做页面布局的分区标签作用和div一样都是独占一行的:

    • header 头

    • main 主体

    • footer 脚

    • section 区域

    • nav 导航

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>

      CSS层叠样式表

      • Cascading Style Sheet, 作用: 美化页面, 相当于装修

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

      • 三种引入方式:

        • 内联: 在标签的style属性中添加样式代码, 弊端:不能复用

        • 内部: 在head标签里面添加style标签,在标签体内通过选择器找到需要添加样式的元素,然后再添加样式代码, 这种用法可以复用,但是只能当前页面复用,不能多页面复用

        • 外部: 在单独的css样式文件中写样式代码,在HTML页面中通过link标签引入, 可以实现多页面复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*先通过选择器找到页面中的元素,然后再添加样式*/
        h2{
            color: blue;
        }
    </style>
    <!--rel关系 引入的文件和页面之间的关系-->
    <link rel="stylesheet" href="my.css">

</head>
<body>
<!--内联样式, 弊端不能复用-->
<h1 style="color: red">内联样式1</h1>
<h1 style="color: red">内联样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>

 

h3{
    color: green;
}

选择器

  • 作用: 用来查找元素的, 找到之后才能添加样式

  1. 标签名选择器: 通过标签的名称选择页面中所有同名元素

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

  1. id选择器: 通过页面中元素的id选择元素, 元素的id是唯一标识不能重复

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

  1. 类选择器: 如果需要选择多个不相关的元素, 可以给多个元素添加相同的class属性值,然后通过类选择器进行选择

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

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

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

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

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

  1. 任意元素选择器: 选取页面中所有标签

  • 格式: *{样式代码} 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器*/
        #p1{color: red}
        /*类选择器*/
        .c1{color: blue}
        /*分组选择器*/
        h3,#p1,.c1{background-color: yellow}
        /*属性选择器*/
        input[type='text']{background-color: red}
        input[type='password']{color: green}
        /*任意元素选择器*/
        *{
            /*边框:粗细  样式   颜色*/
            border: 1px solid red;
        }
    </style>
</head>
<body><!---->
    <input type="text">
    <input type="password">
    <h3>我是h3</h3>
    <p id="p1">苹果</p><p class="c1">香蕉</p><p>橘子</p>
    <div>冰箱</div>
    <div class="c1">洗衣机</div>
    <div>电视</div>
</body>
</html>

 

选择器练习

  • 通过内部样式实现以下功能

1.      把张学友改成绿色

2.      把刘德华和悟空改成蓝色

3.      修改取经3人和刘备的背景为黄色

4.      修改提交按钮的背景为红色,

自定义按钮的字为粉色

5.      给所有元素添加红色的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #zxy{color: green}
    .c1{color: blue}
    h1,h2{background-color: yellow}
    input[type='submit']{background-color: red}
    input[type='button']{color: pink}
    *{border: 1px solid red}
  </style>
</head>
<body>
<ul>
  <li id="zxy">张学友</li><li class="c1">刘德华</li><li>郭富城</li>
</ul>
<h1 class="c1">悟空</h1><h1>八戒</h1><h1>沙僧</h1>
<h2>刘备</h2>
<input type="submit">
<input type="button" value="按钮">
</body>
</html>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

html前端前端

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot