您的位置: 首页  >  IT文章  >  HTML标签和CSS基础

HTML标签和CSS基础

分类: IT文章 • 2023-10-30 15:45:53

前端技术概要


HTML 裸体 只需要记住20个标签就可以搞定98%的网页

CSS 穿衣服 颜色和位置

Javascript 赋予生命，使其具有能动性。

HTML的本质以及在web程序中的作用

#!/usr/bin/env python
# _*_ coding:utf-8 _*_
import socket


def handle_request(client):
	buf = client.recv(1024)
	client.send(bytes('HTTP/1.1 200 OK

', encoding='utf-8'))
	client.send(bytes('Hello, Seven.', encoding='utf-8'))


def main():
	sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
	sock.bind(('localhost', 8000))
	sock.listen(5)
	while True:
		connection, address = sock.accept()
		handle_request(connection)
		connection.close()

if __name__ == '__main__':
	main()

然后在浏览器上输入：http://localhost:8000,就会立刻返回 "Hello,Seven.",从本质上来说web服务就是socket服务端，浏览器就是socket客户端。只不过nginx，apache等WEB服务会在上面做了很多的优化。

可以对返回的内容进行着色，修改

#!/usr/bin/env python
# _*_ coding:utf-8 _*_
import socket


def handle_request(client):
	buf = client.recv(1024)
	client.send(bytes('HTTP/1.1 200 OK

', encoding='utf-8'))
	client.send(bytes("<h1 style='background-color:red;'>Hello, Seven.<h1>", encoding='utf-8'))


def main():
	sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
	sock.bind(('localhost', 8000))
	sock.listen(5)
	while True:
		connection, address = sock.accept()
		handle_request(connection)
		connection.close()

if __name__ == '__main__':
	main()

服务器永远返回的是字符串，而在此时浏览器返回的是红色的字体，则是由浏览器解析到。因此我们必须学习浏览器的解析规则。要发送的字符串的内容（send(xxxxxxx)），我们则可以单独把他写到一个文件中(html文件)，然后读取即可。

HTML规则

  1. HTML规则为一套浏览器认识的规则。　　

  2. 开发者：
    　　学习HTML规则
    　　开发后台程序：
    　　　　- 写HTML文件（充当模版的作用） *******
    　　　　- 数据库获取数据，然后替换到html文件指定位置（这里后面会有web框架专门来做这个事情）

  3. 本地测试
    - 找到文件路径，直接浏览器（chrome）打开
    - pycharm打开（Pycharm有时会有问题。）

  4. 编写html文件
    - document对应关系
    - HTML标签，标签内部可以写属性，切记一个文件中HTML标签只能有一个
    - 注释： <!-- 注释的内容 -->

  5. 标签分类
    - 自闭合标签，如：<meta charset="UTF-8">，比较少，没几个。注意自闭合标签</>，后面可以加个反斜杠，里面大写都不影响。推荐加上斜杠
    - 主动闭合标签，如：<title>Title</title>，比较多，一般都是主动闭合标签

  6. head标签中

    　　- <meta ->编码，跳转，刷新，关键字，描述，IE兼容
    　　　　<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
    　　　　表示浏览器能用IE9就用IE9，不能用，用IE8。

    　　- title标签 页面的标头

    　　- <link/> 标头上面的图标，
    　　　　<link rel="shortcut icon" href="images/favicon.icon">
    　　　　<link rel="stylesheet", type="text/css", href="css/common.css">

    　　- <style/>

    　　- <script/>


    body标签（20个标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> # 这里面设置字符编码格式
    <title>Title</title>   # 这里面的Title为页面的标头
</head>
<body>
    <a href="https:www.baidu.com">百度走起</a>

</body>
</html>


1. 头document type默认是标准的规范，当然还有很多的规范，如果写成别的规范，得到结果则会不同
2. 类似html这种格式<html>xxxxxx</html>,叫做标签，这个是HTML标签，下面依次类推，head标签，body标签，a标签
3. 标签的内部像：lang='en', charset='UTF-8'都是属性。
4. html的注释是这么写的： <!-- xxxxxxx --> ,如果是多行注释的话把结尾放到多行里面。
pycharm自动生成HTML的格式的解析

head标签里面的标签

　　

- meta标签

定义和用法
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

提示和注释：
注释：<meta> 标签永远位于 head 元素内部。
注释：元数据总是以名称/值的形式被成对传递的。


必需的属性
属性 值 描述
content some_text 定义与 http-equiv 或 name 属性相关的元信息

可选的属性
属性 值 描述

http-equiv content-type 把 content 属性关联到 HTTP 头部
expires
refresh
set-cookie

name author 把 content 属性关联到一个名称。
description
keywords
generator
revised
others

scheme some_text 定义用于翻译 content 属性值的格式


1，页面编码（告诉浏览器是什么编码）
<meta httpEquiv="content-type" content="text/html;charset=utf-8">,这是复杂的写法，
<meta charset="UTF-8"> # 这是简写

2，刷新和跳转 (用的比较少，后面js会有动态的跳转)
<meta http-equiv="Refresh", Content="30">
<meta http-equiv="Refresh" content="5, url=http://www.baidu.com">

3，关键字（使用表少，这个主要给搜索引擎来用）
<meta name="keywords" content="Java,多线程,博客,栈,阿里云"/>

4，描述（使用较少）
例如：cnblogs
<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区">
<meta name="description" content="博客园是一个面向开发者的知。xxxxxxxx,博客园的使命是帮助开发者用代码改变世界。">

5, X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
# 结尾处IE7表示以IE7的标准模式打开


- title标签 页面的标头

- <link/> 标头上面的图标，
<link rel="shortcut icon" href="images/favicon.icon"> # 其中shortcut icon为固定用法，后面为图标的路径
<link rel="stylesheet", type="text/css", href="css/common.css"> # stylesheet为css会用到的

- <style/> 欠下

- <script/> 欠下

body内标签（20多个标签在这里面）

- 图标， &nbsp; &gt; &lt; 分别代指空格，大于号，小于号

- p和br 标签. 其中p标签表示段落，p标签和p标签之间表示不同的段落，br标签则表示换行。

　　<p>hello world. my name is tom. <br> I am from china !</p>
　　<p>last week, i went to the school</p>
　　<p>the sky is blue</p>
- span标签 有多少字符就占多少地方，即使有多行也会放在一行。属于行内标签

- H系列标签（H1--H6）

- div标签 白板

---------小结----------
所有的标签分为：
块级标签：div(白板，被广泛使用), H系列（加大加粗），P标签（段落和段落之间有间距）
行内标签：span（白板）
标签之间可以嵌套
标签存在的意义：CSS操作，js操作（比如定位某个字符串更加简单）

小技能：chrome审查元素的使用：
　　　　- 定位
　　　　- 查看样式


- input系列 + form标签
　　input type='text' - name属性 - value 为默认值  (name标签可以让后台程序来区分是那个input标签发送的内容)
　　input type='password' - name属性 -value 为默认值
　　input type='submit' - value='提交' 提交按钮，表单
　　input type='button' - value='登录' 按钮
　　input type='radio' -单选框 - value(可以用来区别用户选择哪一个), checked=''checked(默认值), name(name相同则互斥)属性
　　input type='checkbox' -复选框 - value ,checked=''checked, name属性（批量获取数据）
　　input type='file' - 上传文件，依赖于form表单的一个属性 enctype="multipart/form-data"
　　inPut type='reset' - 重置
　　<textarea>默认值</textarea> - 多行文本框 -name属性
　　select 标签 - name属性，内部option，（optgroup label="河北省" label不能选），value，提交到后台，size=N 显示N个，multiple="multiple" 可以多选


- form标签 输入框中数据是以form的方式提交的。

- a 标签
　　- 跳转
　　- 锚 href="#某个标签的ID" 标签的ID不允许重复

- img标签
　　src 图片路径
　　alt 当找不到图片就先实现这个字符
　　title 鼠标放在图片上显示的信息

- 列表 不常用，后来会用css改造
　　ul
　　　　li
　　ol
　　　　li
　　dl
　　　　dt
　　　　dd

- 表格 常用
　　table
　　　　thead
　　　　　　tr
　　　　　　　　th
　　　　tbody
　　　　　　tr
　　　　　　　　td

　　cospan = 'N' 列合并单元格，N表示合并几个
　　rowspan = 'N' 行合并单元格，N表示合并几个

- label
　　用于点击文字，使得关联的标签获取光标。原来点击"用户名"没有反应，关联之后点击用户名就可以获取光标的，进行输入。
　　<label for="username">用户名：</label> # 用id进行关联
　　<input />

- fieldset  （边框上面的文字，不常用）
　　legend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入框</title>
</head>
<body>
    <form action="http://localhost:8888/index" method="GET">   #以'GET'方式提交
        <input type="text" name="user"/>
        <input type="text" name="email"/>
        <input type="password" name="pwd"/>
        <!--{'user':'用户输入的用户','email':'xxx','pwd':'xxx'}-->   
        # 这一行为HTML真实提交的内容，是以字典的形式提交的。注意默认只会提交input标签里面的内容
        
        <input type="button" value="登录1" />
        <input type="submit" value="登录2" />    # 登录按钮暂时只有submit生效
    </form>
    <br/>
    <form action="http://localhost:8888/index" method="POST"> #以'POST'方式提交
        <input type="text" name="user" />
        <input type="text" name="pwd" />
        <input type="password" name="email" />
        <!--{'user':'用户输入的用户','email':'xxx','pwd':'xxx'}-->
        <input type="button" value="登录1" />
        <input type="submit" value="登录2" />
    </form>
</body>
</html>
例子1


GET和POST的区别
如果是以'GET'的方式（也是默认方式），会把提交的数据拼接到URL上，然后发送到后端。
如果是以'POST'的方式,也同样会把提交的数据发送到后台，只不过不会在URL上显示出来。
http请求提交时会传递两部分东西：请求头，请求体(内容)。
如果以'GET'的方式，提交的数据都会放到请求头里面(URL)中提交过去，请求体中没有数据内容。
如果以'POST'的方式，提交的数据则会放到请求体（内容）中提交过去，请求头中则没有数据。
两者没有安全与否的区别，是因为两者在抓包的时候都能够被抓到。

可以利用这个属性写一个搜狗和百度的搜索引擎！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <input type="text"/>
            <p>请选择性别：</p>
            男<input type="radio" name="gender" value="1" checked="checked"/>
            女<input type="radio" name="gender" value="2"/>
            中性<input type="radio" name="gender" value="3"/>
            <p>爱好：</p>
            篮球<input type="checkbox" name="favor" value="1"/>
            足球<input type="checkbox" name="favor" value="2" checked="checked"/>
            排球<input type="checkbox" name="favor" value="3"/>
            桌球<input type="checkbox" name="favor" value="4"/>
            网球<input type="checkbox" name="favor" value="5"/>
            <p>技能：</p>
            撩妹<input type="checkbox" name="skill" checked="checked"/>
            写代码<input type="checkbox" name="skill" />
            <p>上传文件</p>
            <input type="file" name="filename"/>
        </div>
        <input type="submit" value="提交" />
        <input type="reset", value="重置"/>
    </form>

</body>
</html>
例子2

css

CSS
　　在标签上设置style属性：
　　backgroup-color:#2459a2
　　height:48px;
　　...

　　获取背景颜色的两种方式：

　　1，通过chrome-->检察源码--> style-->coolor
　　2，rgb对照表

　　总结：对于CSS我们要学习的东西也就是style属性里面的key：value。

编写CSS样式：
1，标签的style属性
2，写在head里面，style标签中写样式
- id选择器 # 不常用
　　#i1{
　　　　background-color: #66bc71;
　　height: 48px;
　　｝


　　- class选择器 # 常用
　　.名称{
　　　　　...
　　}
　　<标签 class='名称'> xxxx </标签>


　　- 标签选择器 # 必会
　　div{
　　　　...
　　}
　　会在下面所有的div标签中应用样式，定义时可以写其他的标签。


　　- 层级选择器(空格) # 必会
　　.c1 .c2 div {
　　　　...
　　}
　　会在class='c1'的标签下面找class='c2'标签下面找标签是div，然后应用此样式。
　　最好不要太深，否则用id选择器比较合适！


　　- 组合选择器(逗号) # 必会
　　#c1,.c2,div{
　　...
　　}
　　对上面几个CSS选择器进行组合选择


　　- 属性选择器 # 必会
　　对选择到的标签再通过属性再进行一次筛选
　　/*input[type="text"]{background-color: #66bc71; 100px;height: 20px;}*/     #　为注释行
　　/*input[n="tom"]{background-color: #66bc71; 100px;height: 20px;}*/　　　　＃　为注释行
　　.c1[n="tom"]{background-color: #66bc71; 100px;height: 20px;}
　　# 还可以对自定义的 n = 'tom' 进行样式应用



3， CSS的存在形式：


　　1，可以写在标签<style>xxxxx</style>里面

　　2，CSS样式也可以单独写到文件中
<link rel="stylesheet" href="common.css"/> #写到head标签中对CSS文件进行引用


PS:
　　优先级，标签里面的style优先，编写顺序，就近原则。


4，注释
　　/* xxxxxxx */


5，边框
　　- 宽度，样式，颜色(4px solid coral)
　　- border-left 只打印边框左边的部分

　　<div style="border: 4px solid coral">hello world</div>


6，字体
　　height: 30px; 高度 百分比(单独用无效)
　　 500px; 宽度 像素，百分比
　　text-align: center; 水平方向居中
　　line-height: 30px; 垂直方向根据标签高度（和标签高度一样才会居中）
　　color: darkred; 字体颜色
　　font-size: larger; 字体大小
　　font-weight: 900; 字体加粗
　　border: 3px solid rebeccapurple;


6，背景


7，float
　　让标签飘起来，块级标签也可以堆叠
　　老子管不住： <div style="clear: both"></div>

　　<div style=" 20%;background-color: chartreuse; float: left">hello</div>
　　<div style=" 80%;background-color: crimson; float: left">world</div>

　　高级的写法：

　　利用伪类清除浮动

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix {
            background-color: cornflowerblue;
            border: 1px solid red
        }
        .clearfix:after{
            content: ".";
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;

        }
        #i2{
            background-color: green;
            float: left;
            height: 100px;
        }
        #i3{
            background-color: aqua;
            float: left;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <div id="i2">hello world</div>
        <div id="i3">h2</div>
        <!--<div style="clear: both"></div>-->
    </div>


</body>
</html>



# 利用伪类清除浮动
＃ claerfix:after 相当于在这个clearfix这个标签后要进行的操作

　　

8，display
　　display:inline 块级标签转化成行内标签
　　display:block 行内标签转化成块级标签
　　display:inline-block 既有inline的属性(自己有多少占多少)，也有block的属性(可以设置高度，宽度,....)
　　display:none 让标签消失（在后面学习js的时候会用到）

　　行内标签无法设置：高度，宽度，padding, margin
　　块级标签也可以设置：高度，宽度，padding, margin


9，padding margin(0, auto) 边距

　　padding: 内边距
　　margin: 外边距



颜色和位置

相关推荐