HTML+CSS

HTML

HTML:(Hyper Text Markup language)是超文本标记语言,作用是定义网页的内容和结构.

基本使用

HTML是由一系列元素elements组成,例如:

<p>Hello,World!</p>
<!--p是段落标签-->
  • 整体称之为元素
  • p是预先定义好的HTML标签,作用是将内容作为一个单独的段落

属性

元素还可以有属性,例如:

<p id="p1" title='xx'>Hello,World!</p>
<!--id=xx为给这个标签起一个名字,title=xx是给这个段落添加一个提示-->

嵌套

元素之间可以嵌套,例如

<p>HTML是一门<b>强大</b>的语言</p>
<!--b是强调标签-->

嵌套不能交叉嵌套,例如

<p>HTML是一门<b>强大</p>的语言</b>

空元素

不包含内容的元素称之为空元素,例如:

<img src="路径.png" width="300">
<!-- img为图片,scr=xx为路径--,width=xx为图片的大小,单位为像素>

页面组成

<!DOCTYPE html>				<!-- 文档类型声明 -->

<html lang="zh">			<!--lang=xx表示是什么语言,不写默认为中文-->
<head>
    <meta charset="UTF-8">	 <!-- charset=xx表示什么编码-->
    <title>网页标题</title>
</head>						<!-- 3-12这些称为html文档 -->
<body>
    <p id="p1>Hello,World!</p>
    <img src="1.png">
</body>
</html>
  • HTML页面由文档类型声明和HTML文档组成
  • HTML文档囊括了页面中所有其他元素,整个页面只需要一个,称为根元素
  • head元素包括的是那些不用于展示内容的元素,如title,link,meta等
  • body元素包含了对用户展示内容的元素,例如文本,图片,视频,音频等各种元素

标签

基本标签

标题标签

  • <!-- heading -->
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>

段落标签

  • <!-- paragraph -->
<p>鹅，鹅，鹅，曲项向天歌。</p>
<p>白毛浮绿水，红掌拨清波。</p>

换行标签

  • <!-- 在需要换行的最右边添加换行标签即可 -->
鹅，鹅，鹅，曲项向天歌。<br>
白毛浮绿水，红掌拨清波。<br>

水平线标签

  • <hr>

字体样式标签

  • <!-- 粗体 -->
<strong>I want you</strong>

  • <!-- 斜体 -->
:<em>I want you</em>

特殊符号

  • <!-- 空格 -->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br>
大于号 &gt;<br>
小于号 &lt;<br>
版权符号 &copy;<br>

<!-- 组成结构 -->
&    ;

进阶标签

图像标签

  • 图片格式

    • JPG
    • GIF
    • PNG
    • BMP等
  • <!-- image -->
<img src="文件路径" atl="图片找不到路径时显示这段话"  title="鼠标放在图片上显示的文字">

链接标签

  • <!-- a标签
 href: 跳转的网页地址
 target: 表示窗口在哪里打开
 -->
<a href="BasicMark.html" target="_blank">点击跳转到基本标签</a><br>

  • <!-- 锚链接 
1.需要一个锚标记 id标记
//2.需要在href前加#号
-->
<a href="#down">跳转到底部</a>  <!-- down表示要跳转的锚点名字 -->
<p id="down">页面底部</p>       <!-- 锚链接标记 -->
<a href="#">跳转到顶部</a>    <!-- 只写一个#默认跳转到页面顶部 -->

列表标签

  • <!--无序列表-->
<ul>
    <li>无序列表项1</li>
    <li>无序列表项2</li>
    <li>无序列表项3</li>
</ul>

  • <!--有序列表-->
<ol>
    <li>有序列表项1</li>
    <li>有序列表项2</li>
    <li>有序列表项3</li>
</ol>

  • <!-- 自定义列表
dl: 标签
dt: 列表名称
dd: 列表内容
-->
<dl>
    <dt>自定义列表</dt>
    <dd>自定义列表1</dd>
    <dd>自定义列表2</dd>
    <dd>自定义列表3</dd>
</dl>

  • <!--多级列表-->
<ul>
    <li>
        广东省
        <ul>
            <li>东莞市</li>
            <li>
                清远市
                <ul>
                    <li>清城区</li>
                    <li>清新区</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        福建省
        <ul>
            <li>泉州市</li>
            <li>龙岩市</li>
        </ul>
    </li>
</ul>

表格标签

  • <!-- tbale标签
行: tr
列: td
-->
<table border="2px"> 
    <tr>
        <!-- 跨列
         colspan: 跨几格
         -->
        <td colspan="3">1-1</td>
    </tr>
    <tr>
        <!-- 跨行
         rowspan: 跨几行
         -->
        <td rowspan="3">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

媒体标签

  • <!-- 视频标签
src: 文件路径
controls: 播放按钮
width: 大小
autoplay: 自动播放(默认静音播放) 需要在src前加上muted
-->
<video muted src="../Resource/video.mp4" autoplay width="300px"></video>

  • <!-- 音频标签
 src: 文件路径
 controls: 播放按钮
 width: 大小
autoplay: 自动播放(默认静音播放) 需要在src前加上muted
 -->
<audio src="../Resource/video.mp4" controls></audio>

网页结构分析

  • <header> <h2>网页头部</h2> </header>

<section> <h2>网页主体</h2> </section>

<article> <h2>独立的文章内容</h2> </article>

<aside> <h2>相关内容或者应用</h2> </aside>

<nav> <h2>导航类辅助内容</h2> </nav>

<footer> <h2>网页底部</h2> </footer>

内联标签

  • 在当前页面内置一个框架

    <!-- iframe内联框架
src: 引用页面地址
width: 宽
height: 高
-->
<iframe src="" name="name" width="300" height="300"></iframe>
<a href="https://www.cnblogs.com/Myvlog/" target="name">点击进入到我的博客</a>

表单

表单的作用:收集用户填入的数据,并将这些数据提交给服务器,语法如下:

  • <!-- form表单
action: 表单提交的位置,可以是网站,可以是请求处理地址
method: 提交方式
-->
<form action="../Mark/Basic.html" method="get" enctype="application/x-www-form-urlencoded">
  <!--表单项-->
  用户名:<input type="text" id="username"><br>
  密 码 :<input type="password" name="password"  ><br>
  <br>
  <input type="submit" value="提交按钮">
  <br>
</form>

    • method请求方式有

      • get(默认)提交时,数据跟在URL地址之后

      • post提交时,数据在请求体内

    • enctype在post请求时,指定请求体的数据格式

      • application/x-www-form-urlencoded(默认)

      • multipart/form-data

    • 其中表单项提供多种收集数据的方式

      • 有name属性的表单项数据才会被发送给服务器

常见的表单项

  • input类

    <!-- 文本框 -->
<input type="text" name="username"> 
<!-- 密码框 -->
<input type="password" name="password">
<!-- 隐藏框 -->
<input type="hidden" name="id">
<!-- 日期框 -->
<input type="date" name="birthday">
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 提交按钮 -->
<input type="submit" value="提交按钮">
<!-- 单选按钮 -->
<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">
<!--name要相同,必须有checked(默认选中一个)-->

<!-- 多选按钮 -->
<input type="checkbox" name="favious" value="唱">
<input type="checkbox" name="favious" value="跳">
<input type="checkbox" name="favious" value="rap">
<input type="checkbox" name="favious" value="篮球">
<!-- name要相同 -->

<!-- 文件域 -->
<input type="file" name="avatar">
<!--选择文件上传表单项时,表单中的method要填post,enctype要填multipart/form-data-->

  • <!-- 下拉框 -->
<select name="列表名称">
  <option value="广东" checked>广东</option>
  <option value="广西">广西</option>
  <option value="福建">福建</option>
  <option value="海南">海南</option>
</select>

  • <!--文本域
cols: 列
rows: 行
中间的是默认内容
-->
<textarea id="name" cols="30" rows="10">默认内容</textarea>

  • name:给框体起名字

  • value:元素的初始值

  • size:表单的初始宽度

  • maxlength:输入的最大字符数

  • checked:提交按钮是否被选中

功能性表单

  • <!--邮件验证-->
<input type="email">
<!--url验证-->
<input type="url">
<!--数字验证
max: 最大值
min: 最小值
step: 每次上下加几
-->
<input type="number" max="1000" min="50" step="20">
<!--滑块(进度条,音量大小等)-->
<input type="range">
<!--搜索框-->
<input type="search">

表单应用和验证

  • <!-- 应用 -->
<!-- 在标签中加入即可 -->
readonly:只读
disable:禁用
hidden:隐藏

<!-- 验证 -->
required: 不能为空
pattern: 正则表达式

  • <!-- 验证 -->
<!-- 在标签中加入并且填上信息 -->
placeholder="提示信息"

HTTP请求

组成

  1. 请求行
  2. 请求头
  3. 请求体

get请求示例

GET URL地址 HTTP/1.1 --协议
Host: localhost --地址

post请求示例

POST URL地址 HTTP/1.1 --协议
Host: localhost --地址
Content-Type: application/x-www-form-urlencoded --请求格式
Content-Length: 10 --长度

name=zhang --请求体的数据

json请求示例

POST URL地址 HTTP/1.1 --协议
Host: localhost --地址
Content-Type:application/json --请求格式
Content-Length: 25 --长度

{"属性名1":属性值1,"属性名2":属性值2} --请求体数据

multipart请求示例

POST URL地址 HTTP/1.1 --协议
Host: localhost --地址
Content-Type: multipart/form-data; boundary=123 --请求格式
Content-Length: 125 --长度

--123
Content-Disposition: form-data; name="name" -请求体数据

1is1
--123
Content-Disposition: form-data; name="age" -请求体数据

30
--123--
  • boundary=123用来定义分隔符

session原理

HTTP无状态,有会话

  • 无状态是指请求之间相互独立,第一次请求的数据,第二次请求不能重用
  • 有会话是指客户端和服务端都有相应的技术,可以暂存数据,让数据在请求间共享

服务端使用了session技术来暂存数据

存

GET /s1?name=zhang HTTP/1.1
Host: localhost

取

GET /s2 HTTP/1.1
Host: localhost
Cookie: JESSIONID=BF219FEFB6FF690DA2537CDDED6C393

CSS

CSS:(Cascading Style Sheets)级联样式表,作用是描述了网页的表现与展示效果.

选择器

  • 想给文字或者其他的东西上色,给值就得先定位到文字,所以要选择器定位

type选择器

元素选择器,根据标签名进行匹配

  1. 先创建一个html文件,里面是初始数据,然后使用一个link标签定位到css文件

    <link rel="stylesheet" href="Selector.css">

  2. 创建一个css文件,以给段落标签上背景色为例

    p{
这里面填属性值
	background-color:<!-- 这个是背景色填充 --> 例如,red红色;用分号隔开
}
<!-- 只能匹配全部p标签-->

class选择器

根据标签的class属性进行匹配

  • 可以跨标签使用

  1. 先创建一个html文件,里面是初始数据,然后使用一个link标签定位到css文件

    <link rel="stylesheet" href="Selector.css">

  2. 创建一个css文件,以给某个段落标签上背景色为例

    1. 先给要上色的段落标签定义一个class属性

      <p class="class的名字">段落文本</p>

    2. 匹配class属性的段落标签

      .class的名字{
这里面填属性值
	background-color:<!-- 这个是背景色填充 --> 例如,red红色;用分号隔开
}
<!-- 可以匹配class属性的标签 -->

id选择器

根据标签的id属性进行匹配

  1. 先创建一个html文件,里面是初始数据,然后使用一个link标签定位到css文件

    <link rel="stylesheet" href="Selector.css">

  2. 创建一个css文件,以给某个段落标签上背景色为例

    1. 先给要上色的段落标签定义一个id名字

      <p id="id的名字">段落文本</p>

    2. 匹配id名字的段落标签

      #id的名字{
这里面填属性值
	background-color:<!-- 这个是背景色填充 --> 例如,red红色;用分号隔开
}
<!-- 可以匹配id名字的标签 -->

属性选择器

根据标签筛选然后再根据属性来匹配

  1. 先创建一个html文件,里面是初始数据,然后使用一个link标签定位到css文件

    <link rel="stylesheet" href="Selector.css">

  2. <a href="www.ssangas.com" class="ss" id="fff"></a>

  3. 可以使用正则表达式来进行选择

    -- 例
a[id]{
    
}
<!-- 匹配a标签中的id属性 -->

-- 例
a[class="ss"]{
    
}
<!-- 匹配a标签中的class等于ss的属性 -->
    
-- 例
a[href^=www]{
    
}
<!-- 匹配a标签中href以www开头的属性 -->

选择器优先级

  • id选择器>class选择器>type选择器

美化网页

  • /* 字体 */
font-family:字体;
fint-size:字体大小;
font-weight:字体粗细;
color:字体颜色;

/* 文本 */
text-align: 居中;
text-indent:段落首行缩进;
background:背景颜色;
line-height:行高;
height:高;
text-decoration:underline;下划线

  • /* 选择状态 */
标签名:hover{
    
}
/* 鼠标悬浮的状态*

  • /* 边框 */
margin:外边距;
padding:内边距;
border:边框:
posted @   22-10-21  阅读(23)  评论(0)  编辑  收藏  举报
相关博文：
· javaweb7
· JavaScript
· 什么是 HTML？
· HTML 与 CSS
· HTML基础
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示