HTML和CSS
Posted qq2267711589
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML和CSS相关的知识，希望对你有一定的参考价值。
1.语言进程互联网架构
机器语言--》02020-2二进制码---》汇编语言---》C语言---》Java/Python... ---> javascript/html/css --->未来。。。语义化编程
云服务 --》非常多的客户端访问
服务器（一个服务）JAVA/PYTHON/php/NODE(Js) ----Html/css/js(服务器到客户端的语言) 非常多的客户端（浏览器/手机App/智能电视/智能手表/VR眼镜/AR眼镜）访问
多台服务器（一个服务） ---- 非常多的客户端访问
分布式服务任何问题，其实都有解决方案。学会使用开源框架就ok
HTML/CSS/JS/JQUERY/VUE(框架，前后端分离，可以代替jsp)
Servlet/jsp/正则
项目
2.初识HTML
HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的
WEB开发工具：hbuilder/webstorm/vs code/eclpise
1)最简单的HTML
|
<!DOCTYPE html> ---->告诉浏览器，当前HTML语言使用的是第5个版本，2014年发布 <html> --->根标签，一般有2个标签，head，body标签 <head> --->head标签里的内容一般不直接现实在页面上，用来说明和描述网页文档 <meta charset="utf-8" /> --->申明文档使用的是UTF-8的编码 <title></title> ---->说明网页标题 </head> <body> --->body标签放置真正显示的内容
</body> </html>
|
标签：左右尖括号括起来的内容就是标签。单标签和双标签。双标签是有起始和结束标签。
2）HTML常用标签
[1]网页内容的标题标签
H1,H2,H3...H6，都是网页内容的标题标题
|
<h1>标题1</h1> <h2>标题2</h2> <h6>标题6</h6> |
[2]网页注释标签
|
<!--标题标签--> |
[3]段落标签
|
<p>超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p> |
[4]图片标签
|
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558591161852&di=1bd06fab6bc654369456cf33bff60f07&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201410%2F21%2F20141021205157_j2TL2.thumb.700_0.jpeg"/> |
[5]最常用容器标签
|
<!--最常用的容器标签,因为块级标签，没有其他多余的样式--> <div>hello</div> |
[6]链接标签
跳转到淘宝
|
<a href="http://www.taobao.com">淘宝</a> |
跳转当前页面的某个地方
|
<a href="#跳转到相对应的元素的ID">主要作品</a> |
3.表单标签和列表标签
1)列表
[1]无序列表
1 <!--无序列表--> 2 3 <ul> 4 5 <li>习大大的长征脚步，从未停歇</li> 6 7 <li>传承红色基因 习大大强调四个“不要忘”</li> 8 9 <li>"小"降准"大"意义 支持实体经济向好。效力显著</li> 10 11 </ul>
[2]有序列表
1 <!--有序列表--> 2 3 <ol> 4 5 <li>习大大的长征脚步，从未停歇</li> 6 7 <li>传承红色基因 习大大强调四个“不要忘”</li> 8 9 <li>"小"降准"大"意义 支持实体经济向好。效力显著</li> 10 11 </ol>
之所以有区别，是因为浏览器给到了不一样的默认样式
2)表单标签
form表单标签
action:将表单数据提交给什么服务器（服务器的地址）
method:get/post
get和post区别：get会将表单提交的内容直接放在请求的URL地址里，效率高，不安全。post不会将表单数据显示到url上，会放置在请求的body上。
搜索/正常的请求就会使用get
登陆/注册等比较隐私和安全的内容时候，就需要用到POST,上传文件的时候也会用到post
input标签有多种类型
type=》
text（文本输入）
password(密码)
radio:单选框，注意单选框如果选择的内容是同一项内容，那么多个输入input标签的name值必须一致。
checkbox:复选框，选择的内容是同一项内容，那么多个输入input标签的name值必须一致
color:输入颜色（少用）
date:时间标签（少用）
select>option
textarea：长文本输入标签
1 案例： 2 3 <!DOCTYPE html> 4 5 <html> 6 7 <head> 8 9 <meta charset="UTF-8"> 10 11 <title></title> 12 13 </head> 14 15 <body> 16 17 <form action="" method="get"> 18 19 用户名： 20 21 <input type="text" name="user" id="" value="" /> 22 23 <hr /> 24 25 密码： 26 27 <input type="password" name="passwd" id="" value="" /> 28 29 <hr /> 30 31 <h3>性别选择</h3> 32 33 男 34 35 <input type="radio" name="gender" id="" value="boy" /> 36 37 女 38 39 <input type="radio" name="gender" id="" value="girl" /> 40 41 <hr /> 42 43 <h3>请输入你们喜欢的明星</h3> 44 45 郭敬明 46 47 <input type="checkbox" name="stars" id="" value="gjm" /> 48 49 蔡徐坤 50 51 <input type="checkbox" name="stars" id="" value="cxk" /> 52 53 吴亦凡 54 55 <input type="checkbox" name="stars" id="" value="wyf" /> 56 57 <hr /> 58 59 <h3>请输入你喜欢的颜色</h3> 60 61 <input type="color" name="color" id="" value="" /> 62 63 <hr /> 64 65 <h3>请输入你的生日</h3> 66 67 <input type="date" name="birthday" id="birthday" value="" /> 68 69 <hr /> 70 71 72 73 <h1>请自我介绍一下</h1> 74 75 <textarea name="brief" rows="20" cols="100"></textarea> 76 77 78 79 <hr /> 80 81 <h3>选择你喜欢的城市</h3> 82 83 84 85 <select name="city"> 86 87 <option value="shenzhen">深圳</option> 88 89 <option value="guangzhou">广州</option> 90 91 <option value="shanghai">上海</option> 92 93 <option value="beijing">北京</option> 94 95 </select> 96 97 98 99 <input type="submit" value="注册"/> 100 101 102 103 </form> 104 105 </body> 106 107 </html>
4.css初始
1）css
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
2）CSS使用
[1] style属性上直接使用
<h1 style="color:purple;">今晚吃什么？</h1> <h1 style="color: greenyellow;">吃鸡</h1>
[2]Style标签上使用
语法：
<style type="text/css"> 选择器{样式的内容} </style>
CSS常用选择选择器：
元素选择器：元素名称
Class选择器：.+类名
ID选择器：#+id名称
[3]Link标签引入css文件使用
|
<link rel="stylesheet" type="text/css" href="css/style.css"/> |
3）优先级情况
元素内style属性的优先级>id>class>元素>默认的浏览器样式>继承的样式
越复杂的选择器优先级越高
备注：!Important,将样式的优先级提高到最高
5.css常见属性
1)文字
Color:文字颜色
Font-size:文字的大小
font-family:文字字体，尽量使用黑体，微软雅黑，宋体，普通用户都有的字体
Font-weight:字体粗细,100-900,具体的粗细根据字体文件本身有什么粗细的字体来决定
Text-align:文字的排版，left,center,right
Line-height:行高，行与行之间的高度
Text-shadow:文字阴影
|
text-shadow: 0 0 10px orange,0 0 20px yellow; Text-shadow:水平偏移值 垂直偏移值 阴影的模糊度 阴影的颜色，设置多个阴影用逗号隔开 |
2)容器盒子
Box-size:设置盒子模型
Width:宽度
Height:高度
Padding:内边距
Margin:外边距
Border:边框
Box-shadow:盒子阴影
Display:设置盒子是块级元素还是行级元素还是弹性元素
Background:设置元素的背景，背景图片，背景颜色
6.上传代码到GitHub
1）新建代码库
2）设置创建新的代码库
3）上传代码
4）确定上传
5）点击setting
6）选择主题
7）直接点击选择主题按钮
8）获取页面网址
以上是关于HTML和CSS的主要内容，如果未能解决你的问题，请参考以下文章