HTML+CSS

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

HTML+CSS

1. HTML学习

  • B/S架构：

    • 浏览器/服务器交互模式：Broswer(html +css +js)/Server(java,c,c++,python…)
    • 优缺点：升级方便(只需要升级服务端)，维护成本低。速度慢，体验不好，界面不炫酷。

  • C/S架构：

    • 客户端/服务器端
    • 优缺点：速度快体验好界面炫酷。升级麻烦维护成本高 。（ 娱乐性都用c/s架构）

  • W3C世界万维网联盟制定的。html/xml/http协议/https协议

  • "<!doctype html>"加上这句话代表H5

  • 基本标签：独目标签br,hr；闭合标签：p,h1…h6,del,ins,b,i,pre,font…

  • 实体标签：以&开始，以;结束。

    • <!--a>b<c -->
a&gt;b&lt;c
<!--abc三个空格abc-->
abc&nbsp;&nbsp;&nbsp;abc

1.表格-_-

  • <html>
    <head>
        <title>表格</title>
    </head>
    <body>
		<center><h1> 员工信息表</h1></center>
        <hr>
        <table border=1px align="center" width=60% height=20%>
            <tr>
                <!--单元格标签：表头 比td多居中加粗-->
            	<th>左手敲</th>
                <th>右手敲</th>
            </tr>
            <tr align="center">
                <td style="font-size:24pt">~ !@#$%^&*()_+|</td>
				<!--rowspan 合并时写在第一个td,删除下面的-->
				<td rowspan="2">退格</td>
            </tr>
            <tr align="center">
				<td style="font-size:24pt">` 1234567890-=\</td>
			</tr>
			<tr>
				<td>QWERTYUIOP</td>
				<td rowspan="2"> Enter</td>
			</tr>
			<tr>
				<td>ASDFGHJKL;'</td>
			</tr>
			<tr>
				<td>ZXCVBNM,./</td>
				<td>Shift</td>
			</tr>
			<!--列合并,删除右边的-->
			<tr>
			<td colspan="2" align="center">空格</td>
			</tr>
        </table>
    </body>
</html>

  • thead tbody tfoot

    <html>
    <head>
        <title> 表格thead tbody tfoot</title>
	</head>
    <body>
		<center><h1>员工基本信息表</h1></center>
        <table border=1px align="center" width="50%" height="25px"> 
            <thead>
				<th>员工编号</th>
				<th>员工姓名</th>
				<th>员工住址</th>
			</thead>
            <tbody align="center">
				<tr>
					<td>001</td>
					<td>贾志强</td>
					<td>甘肃省</td>
				</tr>
				<tr>
					<td>002</td>
					<td>贾志昂</td>
					<td>北京市</td>
				</tr>
				<tr>
					<td>003</td>
					<td>肇东</td>
					<td>海外</td>
				</tr>
            </tbody>
			<tfoot align="right">
				<tr>
					<td colspan="3">制表人：贾志强</td>
				</tr>
				<tr>
					<td colspan="3">联系方式：19999</td>
				</tr>
			</tfoot>
        </table>
    </body>
</html>

2.图片

  • meta charset=“utf-8”：意义是告诉浏览器以utf-8的编码格式打开该文件。不是说指定你的代码的编码格式。

  • 这里中间如果没有内容----》写成.所有的闭合标签都可以这么干

  • <!-- 
		设置图片高度图片会失真，只设置宽度，高度会等比例缩放
		title设置鼠标悬停时显示的内容
		<img>这里中间如果没有内容</img>----》写成<img />.所有的闭合标签都可以这么干。
	 -->
	<body>
		<img src="../jQuer学习笔记/练习笔记/img/1.jpg" title="这是个啥" />
		<br><br>
		<img src="../jQuer学习笔记/练习笔记/img/1.jpg" width="100px" height="200px"/>
		<img src="../jQuer学习笔记/练习笔记/img/jpg" alt="图片找不到了"/>
	</body>

  • 超链接：《a href=“可以是网页地址，也可以是本地地址” target=_"_blank/__self/_top/_parent">连接名称（可以是图片“<img src=“地址””/>）</a》

3.列表

<!--无序列表-->
<ul type="disc/square/circle">
    <li>水果
		<ul>
            <li>苹果</li>
            <li>香蕉</li>
        </ul>    
    </li>
</ul>
<!--有序列表-->
<ol type="1/a/A/I/">
    <li>水果
		<ol>
            <li>苹果</li>
            <li>香蕉</li>
        </ol>    
    </li>
</ol>

4.表单

<!--
1.name属性具备，才能将数据携带给服务器地址http://localhost:0/jd/save/?username=qeq&password=123
2.method=post/get:
3.手动选择，必须指定value，才能提交 否则选中的value默认为on
4. <!-- select的name属性写在select中。multiple支持多选，size设置显示条数  
5.type="file"文件上传
6.type="hidden" name="xxx" value="123"隐藏域，网页不显示，能提交。
7.超链接可提交数据，但固定。表单可输入数据提交
8.readonly,disabled都只读，readonly可提交，不能改。disabled不可提交，不可改，即使有name属性。
9.type="text"的maxlength属性控制文本框字符长度
-->
<form action="http://localhost:000/jd/save/" method="post">
   <table>
       <tr>
           <td>用户名</td>
           <td><input type="text" name="username"/></td>
       </tr>
       <tr>
           <td>密码</td>
           <td><input type="password" name="password"/></td>
       </tr>
       <tr>
           <td>确认密码</td>
           <td><input type="password"/></td>
       </tr>
       <tr>
           <!-- 手动选择，必须指定value，才能提交 否则选中的value默认为on-->
           <td>性别</td>
           <td><input type="radio" name="sex" value="1"/ >男
               <input type="radio" name="sex" value="0" checked="checked"/>女
           </td>
       </tr>
       <tr>
           <td>爱好</td>
           <td><input type="checkbox" name="intrest" value="basketball"/>篮球
               <input type="checkbox" name="intrest" value="yumaoqiu"/>羽毛球
               <input type="checkbox" name="intrest" value="pingpang" checked/>乒乓球
           </td>
       </tr>
       <tr>		
           <td>住址</td>
           <td>
               <!-- select的name属性写在select中。multiple支持多选，size设置显示条数  -->
               <select name="addr" multiple="multiple" size="2">
                   <option  value="gs">甘肃</option>
                   <option  value="dx">定西</option>
                   <option  value="jq" selected="selected">酒泉</option>
               </select>
           </td>
       </tr>
       <tr>
           <td>简历</td>
           <td>
               <textarea cols="10" rows="10" name="introduce"></textarea>
           </td>
       </tr>
       <tr align="center"> 
           <td colspan=2><input type="submit" value="登录"/>
               <input type="reset" value="清空"/>
           </td>
       </tr>
   </table>
</form>

5.Html文档

id属性

1.DOM树，每个节点（元素）有一个id属性，方便JS操作节点增删改查

2.id唯一且不重复。标识节点。

3.提交数据时，只和name属性有关，和id属性无关。

div和span:

1.div:图层，可定位div左上角x，y轴，灵活布局，盒子套盒子。默认独占一行。

2.span:图层，可定位div左上角x，y轴，灵活布局，盒子套盒子。不独占一行

2. CSS学习

1.简介：

1.层叠样式表，修饰html元素，是页面更好看。

2.三种方式

  1. 内联定义:<标签 style=“样式名:样式值；样式名:样式值；…”></标签>

  2. 样式块方式:head标签中写入：

  3. 外部引入:外部写成xx.css文件，head中引入：

3.样式

  1. 列表中使用：ul{list-style-type:none;}

  2. text-decoration:none;删除超链接下划线

  3. 绝对定位：position:absolute，左上角开始，x轴y轴定位。

    test.css:
div{
	background-color:red;
    border:1px black solid;
    width:300px;
    height:300px;
    position:absolute;
    left:100px;
    top:100px;
}
test.html:
<head>
/*2.样式块*/
    <style type="text/css">
        #btn{
            border-radius: 10px;
        }
/*class值相同，属于同一类*/
        .button_class{
            color: green;
        }
    </style>
/*3.引入外部样式*/
    <link type="text/css" rel="stylesheet" href="css/test.css" />
</head>
<body>
    <input type="button" id="btn" value="按钮" class="button_class" />
/*1.内联样式*/
    <a href="https://www.baidu.com" style="display:block;text-decoration:none;">点我</a>
    <div>
    <span class="button_class">对不起，我错了</span>
    </div>
</body>
jzq_csdn_blog
关注
c++ html 界面设计,GitHub - BentleyBlanks/TattyUI: 借鉴与浏览器的实现，TattyUI使用HTML+CSS+C++完成业务逻辑和样式实现的分离，从而完成UI的快...
weixin_39588209的博客
06-09 611
TattyUI对比Chrome(本质上是TattyUI做的近似CSS实现)本UI框架底层渲染框架采用nanovg,采用类似浏览器WebKit的做法，将UI的样式与业务逻辑分离。本质上是一个简易的浏览器内核实现。TattyUI第一个较为成熟的production级的产品将会是为 WIP2D 2D游戏引擎制作编辑器，尽请期待。底层CSS解析器为使用Flex+Bison，借鉴Webkit与W3C中CSS...
html css c++,htmlcxx
weixin_34079693的博客
06-29 166
软件简介htmlcxx 是一个 C++ 的 HTML 解析器和 CSS1 的解析器。The parsing politics attempt to mimicthe behavior of Mozilla Firefox, so you should expect parse trees similar tothose created by Firefox. However, it does no...
html css c++,htmlcxx - html and css APIs for C++
weixin_39939601的博客
06-29 101
htmlcxx - html and css APIs for C++Descriptionhtmlcxx is a simple non-validating css1 and html parser for C++. Although there are several other html parsers available, htmlcxx has some characteristics...
[C++]自己编写简单html浏览器: 无限接近找到CSS和HTML的耦合方法， 附图。
weixin_44040041的博客
12-08 191
感觉已经找到同时支持html和CSS的办法。现在最主要的挑战就是支持JavaScript， 完全觉得是无从下手。
c++ html解析库,HTML和CSS的C++解析器 htmlcxx
weixin_39593523的博客
06-17 870
授权协议: LGPL开发语言: C/C++操作系统: 跨平台软件介绍htmlcxx 是一个 C++ 的 HTML 解析器和 CSS1 的解析器。The parsing politics attempt to mimic the behavior of Mozilla Firefox, so you should expect parse trees similar to those created...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
利用html+css+js设计的仿原神网页.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
HTML + CSS 实现淘宝页面首屏静态网页项目练习.zip
12-14
HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面首屏静态网页项目练习 HTML + CSS 实现淘宝页面...
html+css+js科幻后台登录界面模板
04-10
html+css+js科幻后台登录界面模板，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者...
基于HTML+CSS+JS开发的购物商城项目+效果展示+源码
06-13
基于HTML+CSS+JS开发的购物商城项目+效果展示+源码 基于HTML+CSS+JS开发的购物商城项目+效果展示+源码 基于HTML+CSS+JS开发的购物商城项目+效果展示+源码 基于HTML+CSS+JS开发的购物商城项目+效果展示+源码 基于...
页面制作HTML+CSS基础乱炖
weixin_34345753的博客
04-16 99
1.<meta charset="utf-8"> <head></head> 里的 <meta charset="utf-8"> 一定要放在第一行 ，如果放在了<title>下面可能会有问题。 2.标签大集合 3.HTML5语义化标签 4.页面内锚点 <a href=...
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 388
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
水平垂直居中的几种方法（总结）
致未来的你。的博客
09-11 1224
水平垂直居中的几种方法（总结）
XWiki中添加 html 二次编辑失效
最新发布
galoiszhou的博客
09-12 284
使用 XWiki 中的 HTML 宏：如果标准的 Markdown 语法和 XWiki 的链接语法都无法工作，可以考虑使用 HTML 宏，它可以让你在 XWiki 页面中插入纯 HTML 代码，而不会被自动转换回 Markdown。如果直接在 XWiki 中添加 html, 例如 修改颜色, 新窗口打开主页面等功能, 首次保存是生效的. 如果再次编辑, 则失效, 原因是被转换成了 Markdown 的代码, 而 Markdown 不支持.解决这个问题可以使用 HTML 宏.
HTML + CSS - 网页布局之一般布局&浮动布局
qq_51222843的博客
09-11 1188
讲解CSS中的一般布局以及浮动布局
html 中如何使用 uniapp 的部分方法
weixin_59685936的博客
09-11 337
好了，现在就可以 uni. 使用相关的方法了。
HTML+CSS基础要点详解
"HTML+CSS知识点总结" HTML（HyperText Markup Language）是创建网页的标准标记语言，而CSS（Cascading Style Sheets）则用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。以下是关于HTML和CSS的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值