HTML和CSS基础
2024-05-15 23:52:09
HTML和CSS
四、HTML结构
<!DOCTYPE html><!-- 文档声明 ，表示这是一个html页面-->
<html><head><!-- 页面的头部 --><title标题</title><!-- 标题 --></head><body><!-- html的主体 -->正文部分</body>
</html>
五、基本标签
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- html基本标签 --><i>字体倾斜</i><br><b>字体加粗</b><br><u>字体有下划线</u><br><p>段落一</p><br><p>段落二</p><br><hr></hr><br><!-- 分割线 --><h1>最大标题标签</h1><br><h6>最小标题标签</h6><br><!-- 修改文字 --><font color="red">设置颜色为红色</font><!-- 容器标签 --><div style="background-color: yellow;">emmmmm....</div><!-- 占用的位置是一行 --><span style="background-color: blue;">....emmmmm</span><!-- 内容有多宽就占用多宽的空间距离 --></body>
</html>
六、超链接A标签
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- href : 写的是一个链接地址 --><!-- 绝对路径并且在新窗口打开文档 --><a href="https://www.baidu.com/index.php?tn=monline_3_dg" target="_blank">百度一下</a><br><!-- 相对路径并且在本窗口打开文档./ 本目录../上一级目录--><a href="./01_html结构.html" target=""_self"">东京喰种链接</a></body>
</html>
七、图片标签
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- src 属性 ： 资源路径(必须有) jpg,bmp,png,gifalt 属性： 图片资源找不到的时候显示文字提示width 属性：设置图片宽度heigth 属性：设置图片高度（只写一个属性，等比缩放） --><img alt="" src="../image/djcz.jpg"><br><img alt="图片不存在" src="../image/ch.jpg"><br> <img alt="" src="../image/timg.gif"><br><img alt="" src="../image/djcz.jpg" width="500px"><br><!-- 等比例缩放 --><img alt="" src="../image/djcz.jpg" width="500px" height="300px"></body>
</html>
八、列表标签
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 无序列表 --><ul><li>银时</li><li>新八</li><li>神乐</li></ul><dr><!-- 无序嵌套列表 --><ul><li>芳村</li><li>利世</li><li>分类<ul><li>羽赫</li><li>鳞赫</li></ul></li></ul><dr><!-- 有序列表 --><ol><li>银时</li><li>新八</li><li>神乐</li></ol><dr><!-- 定义列表 --><dl><dt>猪皮</dt><dd>曼基康短腿猫</dd><dt>中分</dt><dd>中华田园猫</dd></dl></body>
</html>
九、表格标签
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 表格默认是没有边框的，cellspacing将单元格合并 --><table border="1" width="700px" align="center" cellspacing="0px"><caption>表格</caption><!-- 定义表格标题 --><tr style="height: 30px"><!-- 代表一行,设置行高 --><th>一</th><!-- 定义表格的表头，效果为加粗居中 --><th>二</th><th>三</th><th>四</th></tr><tr style="height: 30px"><td></td><!-- 代表一列 --><td rowspan="2"></td><!-- 代表跨行 --><td></td></tr><tr style="height: 30px"><td>最后 一行!</td><!-- 中文空格 --><td></td><td colspan="2"></td><!-- 代表跨列 --><td></td></tr><tr style="height: 30px"><td>最后 一行！</td><!-- 英文空格 ，三个英文空格等于一个中文空格--><td></td><td></td></tr></table></body>
</html>
十、表单
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><form action="#" method="get"><!-- 单行文本输入框 -->用户名 ： <input type="text"><br><!-- 密码输入框 -->密码 ： <input type="password"><br><!-- 单选框， name分组，name一样就是一组 -->性别 ：<input type="radio" name="gender">男<input type="radio" name="gender">女<br><!-- 复选框 -->爱好 ：<input type="checkbox">篮球<input type="checkbox">游泳<input type="checkbox">跑步<br><!-- 隐藏控件,中转数据 --><input type="hidden"><br><!-- 文件选择控件 --><input type="file"><br><!-- 图片提交按钮 --><input type="image" scr="../image/djcz.jpg"><br><!-- 下拉框 -->省份 <select><option>四川省</option><option>江苏省</option><option>浙江省</option></select>城市 <select><option>成都市</option><option>德阳市</option><option>绵阳市</option></select><br><!-- 单行文本输入框 Rows: 代表行（多少个字符）Cols:代表列（多少个字符）-->简介 ：<textarea rows="10" cols="50"></textarea><!-- 按钮主要是配合js页面脚本代码 --><!-- 普通按钮 --><input type = "button" value = "来按一下"><!-- 重置按钮 --><input type = "reset" value = "重置表单"><!-- 提交按钮 --><input type = "submit" value = "提交表单"></form></body>
</html>
十一、CSS选择器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">/* <!-- 通用选择器 -->*{background-color:blue;} *//* <!-- 标签选择器 -->div{background-color:blue;} *//* <!-- 类选择器 -->.a{background-color:blue;} */<!-- id选择器 -->/* #b{background-color:blue;} */ </style></head><body><div class="a">A</div><div id = "b">B</div><div>C</div><div>D</div></body>
</html>
十二、引用、继承与优先级
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet" href="../css/css.css"><style type="text/css">#c{color: yellow !important;}</style></head><body><!-- 就近原则!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 --><span style="color: red;">A</span><span>B</span><span style="color: red" id = "c">C</span><span>D</span></body>
</html>HTML和CSS基础相关推荐
- html与css项目,项目六HTML与CSS基础.doc
项目六HTML与CSS基础.doc 项目六: HTML与CSS基础 课题名称:6．2 CSS样式表的使用(一) 教学目标 1．知识与技能目标 熟练掌握插入Div 标签和设置样式定义的方法:理解CSS样 ...
- CSS基础_Day04
CSS基础 一.CSS继承 1.给 HTML 的 body 元素添加样式 每一个 HTML 页面都有一个 body 元素. 我们可以通过设置 background-color 的属性值为黑色,来证明 ...
- CSS基础_Day03
CSS基础 一.给 div 元素添加背景色 background-color 属性可以设置元素的背景颜色. .green-background {background-color: green; } ...
- CSS基础_Day02
CSS基础 一.字体 1.更改元素的字体大小 字体大小由font-size属性控制. <style>p{font-size:16px;}//设置p元素字体大小为16px </styl ...
- CSS基础_Day01
CSS基础 一.CSS简介 CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. CSS 的选择器区分大小写,因此要谨慎使用大写. 可以设置以下内容: ...
- 学习笔记（二）——CSS基础
文章目录 一.什么是CSS 二.CSS基本使用 2.1.行内式(内联样式) 2.2.内部样式 2.3.外部样式 2.3.1.嵌入式 2.3.2.导入式 三.选择器 3.1.基础选择器 3.1.1.标签 ...
- css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
- 和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
- CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
最新文章
- 解决Android Studio报错：DefaultAndroidProject : Unsupported major.minor version 52.0
- 记单词 - soil
- 数据流重定向和管道命令, grep, tr,sort, wc, cut,split,tee,sleep(shell 02)
- GitLab添加SSH Keys并连接(windows)
- SAP 电商云 Spartacus UI 客户端模式下从服务器端渲染模式接收到的状态转移
- 如何使用SAP HANA Studio的PlanViz分析CDS view性能问题
- 树莓派移植SX1278 LoRa通信--使用wiringPiSPI移植SPI通信接口
- Appium+Python移动端 实战——教你如何xpath定位自动化测试
- Java中System.nanoTime()的使用
- 批量修改后缀名的方法
- python程序员工资高吗？
- Docker 问题集锦(19) - 解决：standard_init_linux.go:219: exec user process caused
- CCRC认证是什么，ISCCC与CCRC是什么关系？
- 六安职院美和易思互联网+特色专业举行第一届HTML网页设计大赛
- 防Ddos文献之应对篇-DDoS防御方案
- 航空公司营销渠道管理研究
- excel单元格下拉选项怎么设置_Excel单元格内容这样设置才不能被修改
- 【大数据处理技术】「#2」Hive数据分析
- owasp top10 渗透测试
- 什么是功率因数？看完你就懂了