HTML+CSSday01

最新推荐文章于 2024-06-16 06:54:38 发布

__Miracle__

最新推荐文章于 2024-06-16 06:54:38 发布

阅读量182

点赞数

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

原文链接：https://www.baidu.com/

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浏览器

浏览器内核(了解)

移动端的浏览器内核主要说的是系统内置浏览器的内核。]
Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。
iOS平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari

web标准(有利于浏览器生态发展)

web标准有三层结构，分别是结构（HTML）、表现（CSS）和行为（Javascript）

HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言

所谓超文本，有2层含义：因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制) , 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）
HTML 有自己的语言语法骨架格式

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>

团队约定：

HTML标签名、类名、标签属性和大部分属性值统一用小写

HTML元素标签分类

常规元素（双标签）

<标签名> 内容 </标签名>   比如 <body>  我是文字  </body>

空元素（单标签）

<标签名 />  比如  <br />

HTML标签关系

嵌套关系

<head>  
	<title> </title> 
</head>

2. 并列关系

<head></head>
<body></body>

文档类型<!DOCTYPE>

声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

页面语言lang

<html lang="en">  指定html 语言种类

en定义语言为英语
zh-CN定义语言为中文

字符集

<meta charset="UTF-8" />

在这里插入图片描述

HTML常用标签

首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。不会再给结构标签指定样式了。

1）标题标签h (熟记)

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

2）段落标签p ( 熟记)

单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词
可以把 HTML 文档分割为若干段落

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

3）水平线标签hr(认识)

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl] 同上

<hr />是单标签

4）换行标签br (熟记)

单词缩写： break 打断 ,换行

5）div 和 span标签(重点)

div span 是没有语义的是我们网页布局主要的2个盒子想必你听过 css+div
div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。
span 跨度，跨距；范围

<div> 这是头部 </div>    <span>今日价格</span>

他们两个都是盒子，用来装我们网页元素的，只不过他们有区别，现在我们主要记住使用方法和特点就好了

div标签用来布局的，但是现在一行只能放一个div
span标签用来布局的，一行上可以放好多个span

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>neuedu</title>
        <meta charset="utf-8">
    </head>
    <body>
        <!-- 标题标签 -->
        <h1>欢迎大家参加东软冬令营</h1>
        <h2>欢迎大家参加东软冬令营</h2>
        <h3>欢迎大家参加东软冬令营</h3>
        <h4>欢迎大家参加东软冬令营</h4>
        <h5>欢迎大家参加东软冬令营</h5>
        <h6>欢迎大家参加东软冬令营</h6>
        <!-- 段落标签 -->
        <p>这是段落标签</p>
        <!-- 水平线标签 -->
        <hr/>
        <!-- 换行标签 -->
        欢迎来到王者峡谷, <br> 30秒后到达战场
        <!-- div 标签 和 span 标签  重点 -->
        <!-- 都是无色无味的容器, 现代网页都是 div+css盒子模型布局 -->
        <!-- div单独占一行, span 不是单独占一行 -->
        <div>这是div标签</div>
        <div>这是div2标签</div>
        <span>欢迎来到王者峡谷</span>
        <span>30秒后到达战场</span>
    </body>
</html>

文本格式化标签(熟记)

标签属性

所谓属性就是外在特性比如手机的颜色手机的尺寸，总结就是手机的。
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸">  </手机>

图像标签img (重点)

要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。（它是一个单身狗）

语法如下：

<img src="图像URL" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    欢迎来到王者峡谷
    <strong>欢迎来到王者峡谷</strong>
    <b>欢迎来到王者峡谷</b>
    <em>欢迎来到王者峡谷</em>
    <del>欢迎来到王者峡谷</del>
    <u>欢迎来到王者峡谷</u>
    <!-- 标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> -->
    <img src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF" alt="图片加载失败">
    <br>
    <!-- . 这里代表当前文件夹的意思 -->
    <img src="./imgs/hangpai.jpg" alt="图片加载失败">
    
</body>
</html>

链接标签(重点)

单词缩写： anchor 的缩写 [ˈæŋkə®] 。基本解释锚, 铁锚的
在HTML中创建超链接非常简单，只需用标签把文字包括起来就好。
语法格式：

<a href="跳转目标" >文本或图像</a>

注释标签

    <!-- 注释语句 -->     快捷键是：    ctrl + /       或者 ctrl +shift + /

特殊字符（理解）

一些特殊的符号，我们再html 里面很难或者不方便直接使用，我们此时可以使用下面的替代代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 锚链接 -->
    <a href="https://www.baidu.com">点击调整到百度</a>
    <!-- 无序列表 -->
    <ul>
        <li>鲁班七号</li>
        <li>妲己</li>
        <li>后羿</li>
    </ul>

    <hr>
    <ul>
        <li><a href="https://pvp.qq.com/web201605/herodetail/542.shtml"><img src="./imgs/fei.png" alt=""> <br> 暃</a></li>
        <li><a href="https://pvp.qq.com/web201605/herodetail/542.shtml"><img src="./imgs/fei.png" alt=""> <br> 暃</a></li>

        <li><a href="https://pvp.qq.com/web201605/herodetail/542.shtml"><img src="./imgs/fei.png" alt=""> <br> 暃</a></li>

        <li><a href="https://pvp.qq.com/web201605/herodetail/542.shtml"><img src="./imgs/fei.png" alt=""> <br> 暃</a></li>
        <li><a href="https://pvp.qq.com/web201605/herodetail/542.shtml"><img src="./imgs/fei.png" alt=""> <br> 暃</a></li>

   
    </ul>
</body>
</html>

三个表

表格 table(会使用)

创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签

<table>
  <tr>
    <th>表头</th
    >
    ...
  </tr>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在标签中。
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的

<!--align="center"--> 表格居中
<table width="500"  border="1" height ="300" cellpadding="30" cellspacing="0" align="center">
    <tr>
        <th>英雄</th>
        <th>价格</th>
        <th>皮肤数量</th>
    </tr>
    <tr>
        <td>安琪拉</td>
        <td>13800</td>
        <td>5</td>
    </tr>
    <tr>
        <td>后羿</td>
        <td>8888</td>
        <td>4</td>
    </tr>
    <tr>
        <td>韩信</td>
        <td>水晶获取</td>
        <td>2</td>
    </tr>
</table>

列表标签（重点）

无序列表ul

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表 ol （了解）

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

表单标签(掌握)

input 控件(重点)

<input type="属性值" value="你好">

input 输入的意思
<input /标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性

type 属性

这个属性通过改变值，可以决定了你属于那种input表单。
比如 type = ‘text’ 就表示文本框可以做用户名，昵称等。
比如 type = ‘password’ 就是表示密码框用户输入的内容是不可见的

value属性值

用户名:<input type="text"  name="username" value="请输入用户名">

value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。
3. name属性

用户名:<input type="text"  name=“username” />

name表单的名字，这样，后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是用于区别不同的表单。

name属性后面的值，是我们自己定义的。
radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
name属性，我们现在用的较少，但是，当我们学ajax 和后台的时候，是必须的。

checked属性
表示默认选中状态。较常见于单选按钮和复选按钮。

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

label标签(理解)

目标：label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。

概念： label 标签为 input 元素定义标注（标签）。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢？

第一种用法就是用label直接包括input表单。

<label >请选择性别 <input type="radio" name="gender" > 男
    <input type="radio" name="gender"  checked="checked"> 女</label>

第二种用法 for 属性规定 label 与哪个表单元素绑定。

<label for="gender"> <input type="radio" name="gender" > 男
    <input type="radio" name="gender"  checked="checked" id="gender"> 女</label>

当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="">
        <!-- name 是给后端提供的, 目的是获取input里面的数据 -->
        <label for="username">用户名:</label>
        <input type="text" name="username"  value="请输入用户名"> <br>
        <label for="password">密码:</label>&nbsp&nbsp&nbsp
        <input name="password" type="password"> <br>
        <!-- &nbsp是空格的意思 -->
        <!-- 单选钮 name属性值相同代表只能选一个 -->
        <label for="sex">性别: </label>
        男&nbsp&nbsp<input type="radio" name="sex" id="" >  &nbsp&nbsp&nbsp&nbsp
        女&nbsp&nbsp<input type="radio" name="sex" id="" checked="checked">
        <br>
        <p>爱好</p>
        <label for="hobby">篮球</label>
        <input type="checkbox" name="hobby" checked="checked">
        <label for="hobby">王者荣耀</label>
        <input type="checkbox" name="hobby" checked="checked">
        <label for="hobby">游泳</label>
        <input type="checkbox" name="hobby">
        <br>
        <input type="file">
        <br>
        <input type="hidden">
        <br>
        <input type="reset">
        <input type="button" value="返回">
        <input type="submit">
    </form>
</body>
</html>

textarea控件(文本域)

<textarea >
  文本内容
</textarea

作用：
通过textarea控件可以轻松地创建多行文本输入框.
cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用

select下拉列表

<select name="" id="">
    <option value="">黑龙江</option>
    <option value="">吉林</option>
    <option value="">辽宁</option>
</select>

注意：

select 中至少包含一对 option
在option 中定义selected =" selected "时，当前项即为默认选中项。
但是我们实际开发会用的比较少

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label for="comment">请输入您的评论</label> <br>
        <textarea name="comment" placeholder="请对商家做出评价" id="" cols="30" rows="10"></textarea>
        <br> <input type="submit"value="发表评论">
    </form>

    <hr>
    <p>下拉列表</p>
    <p>请选择收货地址</p>
    <select name="" id="">
        
        <option value="">吉林</option>
        <option value="">内蒙古</option>
        <option value="">山东</option>
        <option selected="selected" value="">辽宁</option>

    </select>

    <select name="" id="">
        <option value="">沈阳</option>
        <option value="">营口</option>
        <option value="">大连</option>
        <option value="">锦州</option>

    </select>
</body>
</html>

form表单域

目的：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

__Miracle__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSSday01

浏览器浏览器内核(了解)移动端的浏览器内核主要说的是系统内置浏览器的内核。]Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。iOS平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safariweb标准(有利于浏览器生态发展)web标准有三层结构，分别是结构（HTML）、表现（CSS）和行为（Javascript）HTMLHTML 指的是超文本标记语言 (Hyper Text Markup Langu
复制链接

扫一扫