Day039--HTML
2024-05-22 19:15:40
HTML小马哥博客 HTML CSS + DIV实现整体布局 1. HTML 超文本标记语言 对换行不敏感 空白折叠现象 标签要严格密封 新建HTML文件，输入 html:5,按tab键后，自动生成的代码如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body></body> </html>
head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>
<title>：指定整个网页的标题，在浏览器最上方显示。<meta>：提供有关页面的基本信息<link>：定义文档与外部资源的关系。- <style>:定义内部样式表与网页的关系
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
2. body中标签的分类 - 字体标签 h1 - h6 标题标签 在htm中都是标签,标签的作用: 体现了语义化 h1-h6, u,b,strong,br,hr,em,pre用法
# pycharm中新建html文件<!--文档的声明 一个html文件就是一个文档--> <!DOCTYPE html> <html lang="en"><!--双闭合--><head><!--head标签中的内容不会显示到浏览器上--><!--meta是单闭合标签 定义文档的编码类型，右边默认有个/,可以不写--><meta charset="UTF-8"><!--title是双闭合标签--><title>今天我们学习html</title></head><!--body中的内容都会显示到浏览器上--><body><!--普通文本-->吴老板<!-- h1 只允许页面中有一个: 为了seo和爬虫--><h1>吴老板</h1><h2>吴老板</h2><h3>吴老板</h3><h4>吴老板</h4><h5>吴老板</h5><h6>吴老板</h6><!--行内标签: 在一行内显示,不换行--><!--underline 下划线--><u>娃哈哈</u><!--强调--><b>你好啊</b><!--强调--><strong>你好啊</strong><!--排版标签--><!--换行标签--><br><!--线--><hr><hr><hr><!--行内标签用法示例-->ok,基本上HTML标签就给大家介绍到这里，基本上呢，<strong>div+css</strong>布局，我们常用的的标签如下：<!--斜体标签--><em>哈哈</em><!--空白折叠: 换行和空格折叠成一个空格--><hr>鹅鹅鹅曲项向天歌<!--保留格式,但是前面会有空格,固定格式--><hr><pre>鹅鹅鹅曲项向天歌</pre></body> </html>
View Code 用法示例
标签分类: 1. 行内标签 span (文本级标签,里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。) a em i strong b
特点: - 在一行内显示, 不换行 - 不能设置宽高, 如果不设置宽高, 默认是内容的宽高 - 行内块标签: img input 特点: - 一行内显示 - 可以设置宽高 2. 块级标签 h1-h6 div
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><span id="active" title="你好" style = "color: aqua;width: 100px;">嘿嘿和你</span><!--id是文档中是唯一--><div id="top" style="width: 200px;"><div class="top-l"><!--div标签是块级标签 独占一行,span是行内标签 一行内显示--><span>小米商城</span><span class="sep">|</span><span>MIUI</span><span class="sep">|</span><a href="https://iot.mi.com/index.html" target="_self">loT</a><a href="https://iot.mi.com/index.html" target="_blank">|</a></div><div class="shopCart"><i>图标</i><!--span标签只能放行内标签 em,i span,strong,img. 不能放块级标签块级标签中可以放块级标签,行内标签--><span>购物车(<span class="count">0</span>)</span></div><div class="login"><a href="#">登录</a><a href="#" class="sep">|</a><a href="#">注册</a><a href="#">|</a><a href="#">消息通知</a></div></div><div id="header"></div><div id="wrap"></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="box"><a href="#">跳转顶部</a><!--表示阻止a标签的默认跳转--><a href="javascript:void(0);">跳转顶部</a><a href="./01-我的第一个html代码.html">跳转第一个网页</a></div></body> </html>
View Code div分区
p: 文本级标签,记住, 只能放文字,行内标签,img,表单元素,不能放块 (p标签中不能放div,p标签)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div class="box"><!--记住:p标签只能放 字体标签和img 表单 input,它不能放块--><p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p><p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p><p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p><p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p><!--错误用法示例--><!--p标签中不能放块级标签--><p>哈哈哈<!--<div>嘿嘿</div>--><p>嘿嘿</p></p> </div> </body> </html>
View Code p标签的错误用法示例
ul:(用得最频繁)
unordered list 无序列表（没有序号） 它的子元素只能是li ·手机 电话卡 ·电视 盒子 · ul li 块 li li
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div class="wrap"><div class="list"><ul type="square"><li>手机 电话卡</li><li>电视 盒子</li><li>笔记本 平板</li><li>家电 插线板</li><li>出行 穿戴</li><li>智能 路由器</li><li>电源 配件</li><li>健康 儿童</li><li>耳机 音箱</li><li>生活 箱包</li></ul><ol><li>手机 电话卡</li><li>电视 盒子</li><li>笔记本 平板</li><li>家电 插线板</li><li>出行 穿戴</li><li>智能 路由器</li><li>电源 配件</li><li>健康 儿童</li><li>耳机 音箱</li><li>生活 箱包</li></ol></div></div> </body> </html>
View Code 列表应用示例
ol: ordered list: 有序列表 里面也放li 1. 2. 3. 4.
dl: 自定义列表 dt定义的标题 dd 定义描述标题的内容 table tr td
border="1" style = "border-collapse:collapse"
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <!--border="1" style="border-collapse:collapse;"--> <!--border 设置边框 collapse：边框合并 --> <table border="1" style="border-collapse:collapse;" width="100%"><!--tr 表示每一行--><tr height="300"><!--每行的内容--><td>id</td><td>name</td><td rowspan="3">age</td></tr><tr><td>1</td><td>吴老板</td><!--<td>20</td>--></tr><tr><td>2</td><td>涛歌</td><!--<td>30</td>--></tr><tr><td>3</td><!--<td>小马哥</td>--><td colspan="2">18</td></tr></table> </body> </html>
table标签应用示例
form action: 提交服务器的地址 (定义表单提交时发生的动作) 默认值,明文提交,所有的数据显示在地址栏,安全性低, 最大限制2kb method: 提交的方式 (get post) 发送数据不会显示在地址栏上,安全性高,上传下载都用post enctype: 编码类型,允许表单将什么样的数据传给服务器 如果有文件需要提交给服务器, method必须为POST, enctype必须为multipart/form-data
input: 输入框 type: text button password radio submit file name: value
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--form: 与服务器产生交互 action:交互的网址 http://127.0.0.1:8888表单控件中的name属性会被封装成{} key value属性会被封装成字典的value--><form action="https://www.baidu.com/s" method="get"><!--主要放表单控件--><!--文本输入框--><input type="text" name = 'wd' value = '路飞学城'><label for="password">密码</label><input type="password" name="pwd" id="password" placeholder="请输入密码"><input type="submit" value="搜索"></form></body>
</html>表单应用示例
特点: - 独占一行 - 可以设置宽高,如果不设置宽, 默认是父盒子宽度的100% ##
请求必有响应 前端的解释器就在浏览器中 F12 或检查 elements 元素 console 输出 sources资源 network网络General请求的响应首行 : request URL: 请求地址 request method: 请求方式 GET获取/post提交 status code 状态码 remote address 远程地址Response响应: 显示的页面:HTML 内容: 标签将文本放到浏览器去渲染,不是超文本,则将文件中的文本改变字体,浏览器不会跟着显示 输入标签名按Tab键自动创建闭合标签br*20 自动创建20个br标签 ul>li*10 自动创建ul标签及下面的10个li标签 按住alt键,鼠标点多行,可以编辑多行颜色 各个颜色加起来等于盒子大小 蓝色: 内容 黄色:边框 border 橘黄色: 外边距 margin 绿色: 内填充,内边距 paddingform input 里面可以设置宽高 style="hight= ;"网页: 顶部栏 头部(有LOGO)今日内容:HTML+CSS+JSHTML+CSS 没有逻辑可言 需要记住HTML: 定义文档的结构 (人的骨架)CSS: 修饰文档的样式 (肉和衣服)JS: JavaScript 动作 (点击, 交互)
View Code 提示补充
其他标签:
超链接
1. 外部链接
a : anchor 是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
herf : hypertext reference 超文本链接, 超链接
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><a name="top">顶部</a><span id="active" title="你好" style="color:aqua;width: 100px;">嘿嘿</span><!--id在文档中是唯一的--><span>hehehe</span><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="#top">跳转顶部</a><!--阻止a标签的默认跳转--><a href="javascript:void(0);">跳转顶部</a><!--在本页面打开--><a href="./01-我的第一个html代码.html">跳转第一个网页</a><a href="./01-我的第一个html代码.html" target="_self">跳转第一个网页</a><!--在新标签中打开--><a href="./01-我的第一个html代码.html" target="_blank">跳转第一个网页</a> </body> </html>
View Code返回顶部
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div class="logo"><!--解决a标签不能设置宽高的问题: 1.把a标签强制转成块级标签 2.再设置宽高--><!--src: 图片链接的资源地址 alt:图片资源加载失败的时候显示的代替文本--><a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&pn=2&spn=0&di=101433843280&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1265067270%2C3260796563&os=2337861475%2C1381772050&simid=0%2C0&adpicid=0&lpn=0&ln=1945&fr=&fmq=1540956776967_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201504%2F12%2F20150412H4253_NwGvx.thumb.700_0.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3Dnca8cdbcl&gsm=0&rpstart=0&rpnum=0&islist=&querylist=" style="display: block; height: 100px;"><img src="./images/xiaohua.jpg" alt="校花" height="100"></a><a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&pn=2&spn=0&di=101433843280&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1265067270%2C3260796563&os=2337861475%2C1381772050&simid=0%2C0&adpicid=0&lpn=0&ln=1945&fr=&fmq=1540956776967_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201504%2F12%2F20150412H4253_NwGvx.thumb.700_0.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3Dnca8cdbcl&gsm=0&rpstart=0&rpnum=0&islist=&querylist="><img src="./images/xiaohua.jpg" alt="校花" height="100"></a></div><div><img src="./images/xiaohua.jpg" alt=""></div></body> </html>
View Code 图片超链接
# 相当于刷新了页面,此时 #后面不加锚点也会返回到顶部,相当于刷新页面的效果
2. 锚链接
3. 邮件链接
特殊字符
：空格 （non-breaking spacing，不断打空格）<：小于号（less than）>：大于号（greater than）&：符号&"：双引号'：单引号©：版权©™：商标™
转载于:https://www.cnblogs.com/surasun/p/9883619.html
Day039--HTML相关推荐
- python打开一个软件并进行操作_python程序中的进程操作
之前我们已经了解了很多进程相关的理论知识,了解进程是什么应该不再困难了,刚刚我们已经了解了,运行中的程序就是一个进程.所有的进程都是通过它的父进程来创建的.因此,运行起来的python程序也是一个进程 ...
最新文章
- STM8S103F2 EEPROM读写
- python 下载公众号文章_python3下载公众号历史文章
- Hadoop 中RPC使用
- matplotlib学习记录 四
- ASP.NET MVC 上传大文件时404
- .gpg 进程 linux,小知识之Linux系统中的最大进程数，最大文件描述，最大线程数...
- 李德玉（1965-），男，博士，山西大学计算机与信息技术学院教授
- 5分钟教零基础开发一张驾驶舱（附驾驶舱工具及模板）
- chrome linux添加图标,分享|在 Linux 下体验谷歌 Material风格的GTK和图标主题Paper
- ngnix的简单转发请求之server和location配置详解
- 你见过股市亏最惨的有多惨？
- 电脑声音太小如何增强_如何录制电脑上播放的声音，背景音乐
- 09.Java数据算法
- 好的软件测试的简历是什么样的？
- 分数化简java_中国MOOC分数——Java
- Windows软件之——RocketDock之无法拖放图标到dock栏
- Dataframe两个表格合并
- Python小黄人绘制
- 【无标mysql触发器trigger实例详解
- 奇葩的传参 lt;p gt; 哈哈哈哈 lt;/p gt;