HTML第一天10.15,修改版

最新推荐文章于 2024-04-30 20:15:41 发布
最新推荐文章于 2024-04-30 20:15:41 发布
阅读量6.3k 收藏 1
点赞数
文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WGY0227/article/details/120776404
版权

HTML第一天

一 html

1.1 什么是HTML？

HTML称之为超文本标记语言。

文本：其实就是文字

超文本：不仅有文字还包括 音频 视频 超链接 图片等内容。

HTML超文本标记语言，其实就是一套浏览器能识别的标签，能通过这些标签构建出超文本的内容（网页）

也就是说 ，我们学习HTML就是学习有什么标签 会有什么效果。

1.2 开发工具

DW:设计工具。 设计师（美工）设计图制作出来。前端工程师

WS:开发工具。

HBuilder：开发工具

VS:最新

使用流程：

1 打开开发工具

2 文件---》新建项目

 

3 项目的基本骨架

 

1.3 html基本文档结构

1.3.1 HTML中的注释

注释就是非代码部分。对代码起到解释说明的作用，增强代码的可读性和可维护性。

html的注释 是 <!-- 注释部分 --> 快捷键： ctrl+/

1.3.2html的基本结构

<!-- 文档的声明  我们写的是html代码 html又有很多版本 不一样的html版本 效果也是不一样的
     文档的声明 就是告诉浏览器 当前我们使用html的哪个版本
     并且 这样的写法 DOCTYPE html 标明当前使用html第五代版本
     
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
             "http://www.w3.org/TR/html4/loose.dtd">
 -->
<!DOCTYPE html  >
​
<!-- 
    html中标签分类：   
        单标签 ： <标签名           />
        双标签 ： <开始标签>  内容  </结束标签>
 
 -->
<!--  无规矩不成方圆 
      html标签称之为根标签  作用是告诉程序员 写代码要写到 根标签中
      html是一门弱语言  语法规则不强制  java是一门强语言
 -->
<html>
    <!-- 配置当前网页的元信息 例如 当前网页的作者 开发工具 关键词 等等 -->
    <head>
        <!-- char字符 set集合  字符集 UTF-8编码方式 防止中文乱码  -->
        <meta charset="utf-8" />
        <!-- 标题 -->
        <title>百度一下 你就知道</title>
    </head>
    <!-- 网页中显示的内容都写到body中 -->
    <body>
        
    </body>
</html>

二 HTML的常用标签

2.1 a标签 超链接标签

​
href是a标签的属性 并且编辑当前a标签跳转的路径
​
<a href="" >百度一下 你就知道</a>
​
代码书写方式 ：   a + tab
​
路径分为：
相对路径  参照当前文件的路径
绝对路径  http://  https://  ftp://  file://
​
    
<a href="www.baidu.com">niha  shahsahas </a>
<a href="index.html">你好 哈哈哈</a>
<a href="hehe/index4.html">你好 index4</a>
        
<a href="hehe/heihei/index5.html">index5</a>
​

2.2 图像标签 img

<img src="" >   img+tab
src 用来添加要展示的图片路径 此处也可以写 相对路径和绝对路径
​
绝对路径
<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1340978268,3705912202&fm=26&gp=0.jpg" >
​
​
相对路径
A 需要将资源图片放到当前工程的img文件夹中
B 添加图片
<img src="img/1-2.jpg" >
​
修改图片的尺寸
<img src="img/1-2.jpg"  width="320"  height="800" >
img标签会等比例缩放
​
​
图像超链接
    <a href="http://www.baidu.com">
            <img src="img/1-2.jpg" >
    </a>

2.3 输入框 input 和按钮 button

<input  />  <button>百度一下</button>

2.4 table标签表格

2.4.1 什么是table标签表格标签

就是可以使用html标签完成一个类似于 excel表格的效果

在table标签中分为 行和列，但是 实质上是 行 tr 和每行中的单元格 td

2.4.2 创建单元格

3行4列

A 创建一个table标签

B 需要几行就创建几个tr

C 需要几列 就在每个tr中创建几个td

    <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>

表达式输入：

 table>tr*7>td{你好世界}*8 
 a{Nihao shijie$}*8

2.4.3 table的常用属性

<table  border="3" width="800" height="500"  bordercolor="blue" cellspacing="0"
                   cellpadding="10"  bgcolor="green"  background="img/1-2.jpg" 
                   align="center"
          
          >
            <tr align="right" valign="top">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
         </table>  
border 边框   width  height 宽高   bordercolor 边框颜色   cellspacing 单元格间距  cellpadding 内填充（内容到边框之间的距离 ）bgcolor 背景颜色 background背景图片
​
align ： 如果给table添加 则代表table在网页中的水平位置
         如果给tr添加  则代表内容在单元格中的水平位置
        left  center  right
valign 垂直对齐方式  top   middle  bottom

2.4.4 合并单元格

  <table border="2" width="800" height="500">
            <tr>
                <td colspan="5">1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>1</td>
                <td rowspan="3">2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
          </table>
​
​
1 创建table
2 考虑是水平还是垂直 水平colspan（向后合并）  垂直rowspan（向下合并） 
3 干掉多余的

练习：

 

​
1 创建一个table  （数最多的  不够的肯定是合并了）  4*2
2 合并
3 干掉多余的
​
 <table border="2" cellspacing="0">
            <tr>
                <td colspan="2">联系人</td>
            </tr>
            <tr bgcolor="green">
                <td>姓名</td>
                <td>张三</td>
            </tr>
            <tr>
                <td rowspan="2">电话</td>
                <td>15899993333</td>
            </tr>
            <tr>
                <td>15166333333</td>
            </tr>
          </table>
​
​

练习

 

七行一列

​
1 导入素材
​
 <table  width="1200" height="730" align="center" background="img/bg.jpg">
            <tr align="right" height="40">
                <td>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                    <a href="">新闻</a>
                </td>
            </tr>
            <tr align="center" height="150">
                <td>
                    <img src="img/baidulogo.png" height="120">
                </td>
            </tr>
            <tr align="center" height="50">
                <td>
                    <input type="text" style="width: 400px;"><button>百度一下</button>
                </td>
            </tr>
            <tr align="center" height="160">
                <td>
                    <img src="img/d_1.png" height="150">
                    <img src="img/d_2.png" height="150">
                    <img src="img/d_3.png" height="150">
                    <img src="img/d_4.png" height="150">
                </td>
            </tr>
            <tr align="center" height="160">
                <td>
                    <img src="img/d_5.png" height="150">
                    <img src="img/d_6.png" height="150">
                    <img src="img/d_7.png" height="150">
                    <img src="img/d_8.png" height="150">
                </td>
            </tr>
            <tr align="center" height="100" valign="bottom">
                <td>
                    <a href="">把百度设为首页</a>
                    <a href="">关于百度</a>
                    <a href="">About baidu</a>
                </td>
            </tr>
            <tr align="center" valign="top">
                <td>
                    ©2021 Baidu <a href="">使用百度前必读</a>
                    京ICP证000000000000000001号
                </td>
            </tr>
          </table>
​
​

总结

今天学习了:

  1. a标签 超链接标签的学习和使用

  2. 图像标签 img的学习

  3. 输入框 input和按钮button的学习

  4. table 表格标签的学习

    <a href=""></a>
注意这里的绝对路径和相对路径的区别
<img src="">
​
<input/<input  />  <button>   </button>
​
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
​
​
单元格的合并: colspan  rowspan

WGY0227
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
macOS Catalina 10.15 cdr 懒人版
05-14
苹果MACOS Catalina10.15.4 19E266系统_CDR懒人版安装包下载VMWARE15.1PRO虚拟机亲测可用 本镜像仅供学习下载使用，所有权利归美国苹果公司所有，对此引发的法律责任本人概不负责
MySQL Cookbook 第2版 中文版
柏图
08-28 1118
mac 10.15.7 & Unity 2021.3.14 & XCode 12.4 -＞ Unity IOS 自动安装 Cocoapods 失败解决方法
kyo7552的专栏
01-27 1336
用贵州的那个ip，ping虽然最快，但是下载有问题）3. 打开 unity，触发自动安装 Cocoapods（显示 gem install cocoapods）-> 还是安装失败的话，直接看第4步（好像unity中gem认到的还是旧的，而不是我用rvm安装好ruby后新的gem）原因：unity 打开时，他的 gem 命令好像用的还是旧的，会自动安装到/Library库中，不是我新装好的 gem，导致出错（怎么在unity中让gem运行时是新的，弄了一会没弄出来，算了，先不管了，终端能安装也行了）
2022第八届美亚杯团体赛
Tummyiii的博客
11-02 1245
2022第八届美亚杯团体赛个人分析
Golang 基础一
chinusyan的专栏
03-19 696
一、变量 1、变量声明 Go语言引入了关键字var，而类型信息放在变量名之后 var a int // 默认值为0 2、变量初始化 在定义变量时，就给变量赋值，这种方式就是变量的初始化 var a int = 10 //”=”符号，读作“赋值号”，不能读作“等号 3、变量赋值 var a, b int a = 10 .............................................................................................
Mac10.15 C++版TensorFlow
10-09
Mac10.15 catalina C 版本TensorFlow安装文件，这是目前（2019.10.9）为止最新的C版TensorFlow（如果有新的版本后续我会跟进）
Docker for Mac 10.15.7 版本
09-20
Docker for Mac 10.15.7 版本
macOS Catalina 10.15.7 cdr 镜像懒人版
03-18
macOS Catalina 10.15.7 cdr 镜像懒人版，可vmware使用
智思Ai企联系统10.15版本
12-19
智思Ai企联系统10.15版本智思AI企联系统是一款企业级AI系统，与普通版AI产品相比具备显著差异。该系统允许企业按需选择和定制二开任意功能，以满足不同企业的个性化需求和场景要求。企业可以根据实际业务需求扩展和...
高德地图+HTML+点击事件+自定心信息窗体
pursue.dreams的博客
04-30 158
【代码】高德地图+HTML+点击事件+自定心信息窗体。
用html画一个四叶草
liulang68的博客
04-20 1674
以上是部分代码，需要请看主页加联系方式。
html中引用视频文件的方式有哪些？
最新发布
2301_79698214的博客
04-30 148
需要注意的是，以上方法中的视频文件路径可以是相对路径或绝对路径，具体取决于视频文件的位置。另外，不同的浏览器和设备对于视频文件的支持可能有所不同，因此可以通过添加兼容性的代码来处理不支持视频播放的情况。
在html中使用数学公式latex
bigcrab的博客
04-27 401
来自 https://katex.org/docs/autorender 可以自动渲染。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1188
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
HTML：认识HTML及基本语法
2301_79263365的博客
04-30 677
标记语言中，就提供了许多的标签，不同标签有不同的功能，最终运行时，由浏览器对标签进行解析，最终呈现出不同标签的样子。
前端HTML如何不删除div标签将div标签隐藏
载_酒i
04-27 279
不会影响文档的布局，而其他方法可能会。如果您需要保持原始布局不变，最好使用元素，您可以使用 CSS 的。在 HTML 中，要隐藏。
html笔记 ai问答
qq_50437196的博客
04-23 620
在HTML中，`text-align: center` 属性是用来设置内联内容（比如文本或链接）在其块级容器（比如`<div>`, `<p>`, 或 `<h1>` 等）内部水平居中的。- `$("p span")`会选择所有位于`p`元素内的`span`元素，无论`span`元素嵌套在`p`元素内部的深度如何。在这个例子中，尽管 `text-align: center` 是应用在 `<h1>` 上的，但 `<span>` 作为内联元素会继承这个对齐方式，从而使得其中的文本居中。
HTML 表单标签
jane9872的博客
04-30 499
注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。请把"for"属性的值设置为相关元素的 id 属性的值。type="button", "reset", "submit" - 定义按钮上的显示的文本。type="text", "password", "hidden" - 定义输入字段的初始值。type="checkbox", "radio", "image" - 定义与输入相关联的值。
黑苹果macos10.15.7 cdr懒人版 天翼网盘
09-19
黑苹果 macOS 10.15.7 CDR 懒人版是一款基于黑苹果技术开发的操作系统版本，适用于个人电脑安装使用。它基于 macOS 10.15.7 版本进行修改和优化，以提供更好的兼容性和性能。 天翼网盘是中国电信旗下的云存储服务...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值