iamsonglu / blog Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 0 B

Home Page: https://iamsonglu.cn

blog's Introduction

blog

blog's People

Contributors

Watchers

blog's Issues

页面呈现

现在关于，友链，书单都出不来，还有分类也是

文章发表测试

这是第一篇博文，主要测试open issues的文章发表功能。
为什么我自己写，文章就不显示呢？

免费Free

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世纪它已经成为一种全新的经济模式。

我是一只IT小小鸟

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笔记_01

《Head First HTML 与CSS》之HTML

最近正在学习html、css，今天刚刚看完这本书的html部分，css部分看完了选择器，打算把html部分的知识点总结归纳一下。

以后会持续更新更新这个系列，以此共勉。

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文件结构

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根元素

html元素又称根元素，由<head>元素、<body>元素组成。

<head>

meta、title、link、style元素只能放在<head>元素内。

html5要求一个html文件必须要有meta和title元素。
<body>

页面需要展示的内容，全都放在body标签

初识元素

html的元素构成：<开始标签>内容<结束标签>，比如下面这张图

html

根元素必须要有的属性lang，一般设计中文网站，属性值这么写**lang="zh-Hans"**，说明文件使用中文简体。

使用英文：lang="en"；使用中文繁体：lang="zh-Hant"。

title

<head>标签内的title标签一定要有，内容就是网页标签名。

link

这个标签一般是引用外部资源使用，可以有多个，通常用来链接外部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元素

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元素

inline元素特点，和其他元素随波逐流，不单独占一行；不能设置宽高、内外边距等。

<img>：必须有src和alt属性，且src非空值。img是inline元素，同时也是替换元素，替换元素可以设置宽高。

alt属性值一般会在图片加载失败显示，不同浏览器图片失败显示内容会有区别。如果只是希望改变图片的大小，不要用width和height属性，最好在css中设置。

这里讲一下图片格式，图片一般有三种.jpg、.png和.gif。
- 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>

inline-block元素

<input>
<img>

void元素

按照元素是否独占一行，元素可以分为block元素、inline元素和inline-block元素。
按照有无内容，又可以分为void元素和正常元素。void是指空元素，即自闭元素，没有内容。

void元素不允许嵌套inline元素。

而正常元素又可以分为语义标签和非语义标签。语义标签，即清晰地定义其内容；非语义，即无法提供关于其内容的信息。

语义标签

语义元素：清晰地定义其内容。比如<form>、<table>等从标签名就能知道它是干什么用的。

非语义标签

非语义标签：无法提供关于其内容的信息。比如<div>、<span>。

特殊字符

注意特殊字符在html中的输入方法，一般是&实体名;或者&十进制编码;。
输出3>2，代码：3 > 2或者3 &#62 2，gt是>的实体名，#62是十进制编码。

输出版权号，代码：&copy

html5新增标签

语义化标签

header：标记定义文档或节的页眉
nav：标记定义导航链接
aside：标记定义页面内容以外的内容，比如侧栏
details：定义用户能够查看或隐藏的额外细节
main：标记定义文档的主内容
footer：标记定义文档或节的页脚
article：定义文章
mark：标记定义重要的或强调的文本
section：定义文档中的节，通常有标题，可以将网站首页分为简介、内容、联系信息等节。
summary：定义<details>元素的可见标题
time：定义日期/时间

看了上面这些标签，我有一些疑问：

1.article和section有什么区别

多媒体交互标签

video：标记定义一个视频
audio：标记定义音频内容

表单标签

新增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>
```

关于

Origin

鹿鸣人，尝试About页面格式。以空行分割，且行末必须空一行。

假设行末空行

评论测试

Gitalk配置没有问题，评论模块也能加载出来，但是初始化不成功，每次初始化返回页面，gitalk出现错误

诗经·国风·周南

关雎

关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
求之不得，寤寐思服。悠哉悠哉，辗转反侧。
参差荇菜，左右采之。窈窕淑女，琴瑟友之。
参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

iamsonglu / blog Goto Github PK

blog's Introduction

blog

blog's People

Contributors

Watchers

blog's Issues

页面呈现

免费Free

我是一只IT小小鸟

木子的博客

樱花庄的白猫

樱花庄的白猫

木子的博客

《Head First HTML 与CSS》之HTML

HTML

HTML文件结构

文档声明

html根元素

初识元素

html

meta

title

link

体标签

block元素

inline元素

inline-block元素

void元素

语义标签

非语义标签

特殊字符

html5新增标签

语义化标签

多媒体交互标签

表单标签

Origin

假设行末空行

关雎

Recommend Projects

Recommend Topics

Recommend Org