iamsonglu / blog Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://iamsonglu.cn
Home Page: https://iamsonglu.cn
现在关于,友链,书单都出不来,还有分类也是
这是第一篇博文,主要测试open issues的文章发表功能。
为什么我自己写,文章就不显示呢?
authour: [美]克里斯·安德鲁
published: 2009-09-01
progress: 未读
rating: 5
postTitle: 免费Free
postLink: https://iamsonglu.cn/#post/
cover: https://cdn.jsdelivr.net/gh/iamsonglu/blogimg@latest/book/免费.jpg
link: https://book.douban.com/subject/3932520/
description: 在《免费:商业的未来 》这本书,克里斯·安德森认为,新型的“免费”并不是一种左口袋出、右口袋进的营销策略,而是一种把货物和服务的成本压低到零的新型卓越能力。在上世纪“免费”是一种强有力的推销手段,而在21世纪它已经成为一种全新的经济模式。
authour: 胡江堂
published: 2009-09-01
progress: 未读
rating: 6
postTitle: 我是一只IT小小鸟
postLink: https://iamsonglu.cn/#post/
cover: https://cdn.jsdelivr.net/gh/iamsonglu/blogimg@latest/book/IT鸟.jpg
link: https://book.douban.com/subject/4006425/
link: //blog.k8s.li/
cover: //cdn.jsdelivr.net/gh/iamsonglu/blogimg@latest/friend/501li1.jpg
avatar: //cdn.jsdelivr.net/gh/iamsonglu/blogimg@latest/friend/501li2.jpg
link: //2heng.xin/
cover: //cdn.jsdelivr.net/gh/iamsonglu/blogimg@latest/friend/2heng1.jpg
avatar: //cdn.jsdelivr.net/gh/iamsonglu/blogimg@latest/friend/2heng2.jpg
link: //2heng.xin/
cover: //cdn.jsdelivr.net/gh/iamsonglu/blogimg@latest/friend/2heng1.jpg
avatar: //cdn.jsdelivr.net/gh/iamsonglu/blogimg@latest/friend/2heng2.jpg
link: //blog.k8s.li/
cover: //cdn.jsdelivr.net/gh/iamsonglu/blogimg@latest/friend/501li1.jpg
avatar: //cdn.jsdelivr.net/gh/iamsonglu/blogimg@latest/friend/501li2.jpg
最近正在学习html、css,今天刚刚看完这本书的html部分,css部分看完了选择器,打算把html部分的知识点总结归纳一下。
以后会持续更新更新这个系列,以此共勉。
html是超文本标记语言(Hyper Text Markup Language),其中超文本指内容不仅有文本,还有图像、视频、音频等。
html的历史,1989年至1991年是html1.0、html2.0的年代,html3更新于1995年,html4更新于1998年(和我一样大呀),在随后的1999年又推出了html4.0.1,这个版本一直用到2009年,也就是我们的html5诞生了。
html5在html4的基础上更新了很多标签,也弃用了一些标签,使得网页更加语义化。后续也会整理一波html5新增的标签及用法,语言的更新一定是有意义的,好好理解。
html文件由2部分组成,头部的文档类型声明和html根元素。
html5中的文档类型声明标记:<!doctype html>
。
如果你看到这样的文档声明:
<!doctype html PUBLIC "-//w3c//DTDHTML4.0.1//EN" "http://www.w3.org/TR/html14/strict.dtd">
这是html4文档声明的写法,简单说明一下每个部分的含义。
html:页面的根元素;public:表示html4.0.1标准是公共可用的;第一个引号:表示使用的html4.0.1版本,注意这句话用英文写;第二个引号:指向一个文件,标识这个特定的标准。
简单理解,如果以后在html文件中看见了,要认识。
html元素又称根元素,由<head>元素、<body>元素组成。
<head>
meta、title、link、style元素只能放在<head>元素内。
html5要求一个html文件必须要有meta和title元素。
<body>
页面需要展示的内容,全都放在body标签
html的元素构成:<开始标签>内容<结束标签>
,比如下面这张图
根元素必须要有的属性lang,一般设计中文网站,属性值这么写**lang="zh-Hans"
**,说明文件使用中文简体。
使用英文:lang="en"
;使用中文繁体:lang="zh-Hant"
。
html5的标记格式:<meta charset="utf-8"
。
charset指定unicode字符编码为utf-8。
html5之前的标记格式:<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>标签内的title标签一定要有,内容就是网页标签名。
这个标签一般是引用外部资源使用,可以有多个,通常用来链接外部css,标记格式:<link rel="stylesheet" type="text/css" href="your css address">
<body>内的元素(=标签),按照是否独占一行可以分为block元素(块级元素)、inline元素(行内元素)和介于二者之间的inline-block元素和block-inline元素。
block、inline可以相互转换,inline-block与block-inline可以相互转换。比如div是block元素,转换为inline元素的代码:
div{
display:inline;
}
<div>我要变成内联元素</div>
元素之间转换不要滥用,一般会用在想要设置宽高的inline元素上,比如<a>和<span>。
block元素独占一行,可设置宽高、内外边距等,元素宽度默认和父元素一致。
<h1>~<h6>
<p>
<ol><li>:有序列表,列表只能嵌套列表,且必须配套使用。
<ul><li>:无序列表,规则同有序列表。
<dl><dt><dt>:自定义列表
<!--插入一个定义列表,dt为定义术语,dd为定义描述-->
<p>这是一个定义列表</p>
<dl>
<dt>Bruma Shave Signs</dt>
<dd>
Road signs commom in the U.S. in the 1920s and 1930s advertising shaving products.
</dd>
<dt>Route 66</dt>
<dd>
Most famous road in the U.S. highway system
</dd>
</dl>
<pre>
<code>
<form>
<table>
<text>
<blockquote>
inline元素特点,和其他元素随波逐流,不单独占一行;不能设置宽高、内外边距等。
<img>:必须有src和alt属性,且src非空值。img是inline元素,同时也是替换元素,替换元素可以设置宽高。
alt属性值一般会在图片加载失败显示,不同浏览器图片失败显示内容会有区别。如果只是希望改变图片的大小,不要用width和height属性,最好在css中设置。
这里讲一下图片格式,图片一般有三种.jpg、.png和.gif。
照片一般用.jpg格式,logo、单色图像或几何图形用.png或.gif,如果是透明logo,要确保蒙版颜色与web背景一致。
<a>:默认是inline元素,可以通过设置display
属性将a转换成block,代码:a{display:block;}
。
<a>标签的属性:
href="目标路径"
title="这是XX"
target="_blank"
(新窗口打开)<span>
<q>:短引用,一般表现为给内容加双引号,但在某些浏览器可能不是。
<label>
<time>
<i>
<em>
粗体:<strong>、<b>
按照元素是否独占一行,元素可以分为block元素、inline元素和inline-block元素。
按照有无内容,又可以分为void元素和正常元素。void是指空元素,即自闭元素,没有内容。
void元素不允许嵌套inline元素。
而正常元素又可以分为语义标签和非语义标签。语义标签,即清晰地定义其内容;非语义,即无法提供关于其内容的信息。
语义元素:清晰地定义其内容。比如<form>、<table>等从标签名就能知道它是干什么用的。
非语义标签:无法提供关于其内容的信息。比如<div>、<span>。
注意特殊字符在html中的输入方法,一般是&实体名;
或者&十进制编码;
。
输出3>2
,代码:3 > 2
或者3 > 2
,gt是>的实体名,#62是十进制编码。
输出版权号,代码:©
看了上面这些标签,我有一些疑问:
1.article和section有什么区别
新增input表单属性
新增的表单方法?
tel:验证输入是否是电话号码的格式
<input type="tel" name="tel" placeholder="请输入手机号">
url:提交表单的时候验证输入值是否满足url格式
<input type="url" name="url" placeholder="请输入地址">
date:选取日、月、年
datetime-local:选取时间、日、月、年(本地时间)
search:用于搜索域
placeholder:在用户输入时进行提示
required:表示该元素是必填项
<input type="text" name="userName" placeholder="请输入账号" required>
新增表单标签
datalist:定义选项列表,配合<option>、<input>标签使用
<input list="cars">
<datalist id="cars">
<option>飞机</option>
<option>高铁</option>
<option>大巴</option>
</datalist>
input的list值必须与datalist的id值一致,区分大小写。
搜索发现有种写法会把option当成空元素用,代码不报错,与上面效果一样,但是html默认option是正常元素,下面这种写法难道是html5以前的用法吗?
<input list="cars">
<datalist id="cars">
<option value="飞机">
<option value="高铁">
<option value="大巴">
</datalist>
鹿鸣人,尝试About页面格式。以空行分割,且行末必须空一行。
Gitalk配置没有问题,评论模块也能加载出来,但是初始化不成功,每次初始化返回页面,gitalk出现错误
关关雎鸠,在河之洲。窈窕淑女,君子好逑。
参差荇菜,左右流之。窈窕淑女,寤寐求之。
求之不得,寤寐思服。悠哉悠哉,辗转反侧。
参差荇菜,左右采之。窈窕淑女,琴瑟友之。
参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.