标签：知识点 webday01 -- 标签 代码 样式 图片 选择器 页面
day39
1.快捷键
注释快捷键 ctrl+shift+/
快速进入下一行 shift+回车
<hr>分割线
<s>删除线</s>
2.知识点
1.文本相关标签
-
h1-h6 文本标题, 特点: 独占一行, 自带上下间距, 字体加粗
-
p 段落标签, 特点: 独占一行,自带上下间距
-
hr 水平分割线
-
br 换行
-
b 加粗
-
i 斜体
-
u 下划线
-
s 删除线
2.列表标签
-
无序列表: ul和li 组合 unordered list list item 列表项
-
有序列表: ol和li 组合 ordered list
-
列表嵌套: 有序列表和无序列表可以任意无限嵌套 .
3.图片标签
-
src: 资源路径
-
相对路径: 访问站内资源
-
图片和页面在同级目录: 直接写图片名
-
图片在页面的上级目录: ../图片名
-
图片在页面的下级目录: 文件夹名/图片名
-
绝对路径: 访问站外资源, 图片盗链, 有找不到图片的风险
-
alt: 图片不能正常显示时显示的文本
-
title: 图片标题
-
width/height: 设置宽高 , 只设置宽度时高度会自动等比例缩放
-
像素
-
上级元素百分比
4.超链接a
-
href: 资源路径, 作用类似图片标签的src
-
a标签包裹文本为文本超链接, 包裹图片为图片超链接
-
页面内部跳转, 在目的地的元素里面添加id=xxx 然后在超链接里面添加href="#xxx"
表格table
-
相关标签: table tr表示行 td表示列 th表头 caption标题
-
相关属性: border边框 colspan跨列 rowspan跨行
表单form
-
作用: 获取用户输入的各种信息 并提交给服务器
-
学习form表单主要学习的就是有哪些控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发表文章</title>
</head>
<body>
<form action="http://www.baidu.com">
<!--maxlength最大字符长度 value设置默认值 readonly只读-->
用户名:<input type="text" name="username" maxlength="5"value="abc" readonly><br>
密码:<input type="password" name="password"><br>
<!--value是单选框必须添加的属性 否则提交on checked默认选中-->
性别:<input type="radio" name="gender" value="m" id="r1"> <label for="r1">男</label> <input type="radio" name="gender" checked value="w">女<br>
兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟 <input type="checkbox" name="hobby" checked value="hj">喝酒 <input type="checkbox"name="hobby" value="tt">烫头<br> 生日:<input type="date" name="birthday"><br> 靓照:<input type="file" name="pic"><br>
所在地:
<!--value设置提交的内容 selected默认选中--> <select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz" selected>广州</option>
</select><br> <input type="submit" value="注册"></form>
<style>
</style>
</body>
</html>
分区标签
-
作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理
-
块级分区标签div: 特点是独占一行
-
行内分区标签span: 特点是共占一行
-
页面区域如何划分? 至少分为三大区(头,体,脚) 每个大的区域再划分n个小的区域
-
HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签
-
header头
-
footer脚
-
main主体
-
section区域
-
nav 导航
CSS 层叠样式表
-
Cascading Style Sheet
-
作用: 美化页面(装修)
如何在HTML页面中添加CSS样式代码
-
三种引入方式:
-
内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用
-
内部样式: 在head标签里面添加一个style标签, 在标签体内写样式代码, 可以实现复用但是只能本页面复用
-
外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用, 可以将html代码和css样式代码分离
选择器
-
标签名选择器: 选取页面中所有同名标签
-
格式: 标签名{样式代码}
-
id选择器: 当需要选择页面中某一个元素时使用
-
格式: #id{样式代码}
-
类选择器: 当需要选择多个不相关的元素时,给多个元素添加相同的class属性,然后通过类选择器进行选择
-
格式: .class{样式代码}
-
分组选择器: 分组选择器可以将多个选择器合并成一个
-
格式: h4,#id,.class{样式代码}
-
属性选择器: 通过元素的属性选择元素
-
格式: 标签名[属性名="属性值"]{样式代码}
-
任意元素选择器: 选择页面中所有标签
-
格式: *{样式代码}
标签：知识点,webday01,--,标签,代码,样式,图片,选择器,页面 来源： https://www.cnblogs.com/xiaoyezilei/p/16180258.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。