cndaqiang Web Linux DFT

HTML学习(一)语法结构

2017-08-09
cndaqiang
web
 
RSS
Star

参考

HTML 教程 - w3school 在线教程

HTML 教程-菜鸟教程

W3C HTML5 中文手册

维基百科-HTML

HTML教程,XHTML教程

简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

html 是标记语言，不是编程语言，由浏览器翻译标记的内容

HTML文件

from wiki

使用文本编辑器创建编辑创建*.html或者*.htm文件，使用浏览器预览

HTML语法

<标签名 标签属性>内容</标签名>

示例

<!doctype html>
<!--我代表注释-->
<html>
	<head>
	<!--head标签内可包含关于文档的信息，例如网站标题，作者，语言，css等，浏览器不会向用户显示这些头部信息-->
		<title>网站标题</title>
	</head>
	<body>
	<!--body标签内是文档的主体，也是用户能看到的部分，文档的所有内容（比如文本、图像、颜色、图形等等-->
		<h1>hello word !</h1>
	</body>
</html>

标签

html语言，使用标签(元素)与浏览器就行交流，传递网页布局，编码，作者，字体格式、图片视频链接、注释等信息，还具有传达给搜索引擎网页的脉络关键词等功能。标签有开始和结束，即生效范围，以<head>标签为例，<head>和</head>之间为head标签的管辖范围，里面包含关于文档的信息。浏览器不会向用户显示这些头部信息。标签之间可以嵌套，例如下面这些标签可用在 head内部：

<base>, <link>, <meta>, <script>, <style>, 以及 <title>

另html标签不区分大小写，w3c推荐小写

必要的标签

<!DOCTYPE> 声明是文档中的第一个成分，位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范

<html> 元素告知浏览器这是一个 HTML 文档

<head> 元素可包含关于文档的信息。浏览器不会向用户显示这些头部信息（"head information"）。下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

<body> 元素定义文档的主体。其中包含文档的所有内容（比如文本、图像、颜色、图形等等）。

<!--...--> 标签注释标签用于在源文档中插入注释。注释会被浏览器忽略。可使用注释对的代码进行解释，这样做有助于以后的时间对代码的编辑。

更多的标签可参见W3C HTML5 中文手册

标签属性

HTML 标签拥有属性。可以在每个标签的参考页中找到相应的特殊属性。 例如: <a>标签定义超链接，它用于从一个页面连接到另一个页面。

<a href="https://www.w3.org/">W3C</a>

href属性表示链接向https://www.w3.org/，当然还有其他的属性，可在W3C HTML5 中文手册中<a>标签页查询

HTML 元素还有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个 HTML 元素时启动一段 JavaScript。其详细参数也可以在W3C HTML5 中文手册中查询到。

常用标签

1. 表单 <form>

收集用户输入的信息

1.1 常用定义

<form>
<input type="类型" name="表单元素名" value="表单元素值">
</form>

1.2 文本输入 type=text

例

<form>
<input type="text" name="Name">
</form>
<!--值为输入内容-->

1.3 密码 type=password

例

<form>
<input type="password" name="Pwd">
</form>
<!--值为输入内容-->

1.4 单选按钮 type=radio

例

<form>
<input type="radio" name="sex" value="male">male<br>
<input type="radio" name="sex" value="female">female<br>
</form>
<!--值为输入内容-->

1.5 复选框 type=checkbox

name后为数组 例

<form>
<input type="checkbox" name="like[]" value="HTML">HTML<br>
<input type="checkbox" name="like[]" value="C++">C++<br>
</form>
<!--值为输入内容-->

1.6 下拉列表

单选下拉列表
<form>
<select name="复选框名">
<option value="值">网页显示内容</option>
<option value="值">网页显示内容</option>
<option value="值" selected>网页显示内容</option>
<!--selected对应项为默认选项，可不写，则默认为第一个-->
</select>
</form>

例

<form>
手机<br>
	<select name="phone">
	<option value="apple">Apple</option>
	<option value="xiaomi">Xiaomi</option>
	<option value="piexl" selected>Piexl</option>
	</select>
</form>

复选下拉列表

与单选相比，多了multiple=”multiple” name=”复选框名[]”，选择名变成了数组，就像复选框的原理一样

<select multiple="multiple" name="复选框名[]">

1.7 提交按钮 type=”submit”

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。 例

<form name="input" action="html_action.php" method="get">
<--!其他内容-->
<input type="submit" value="提交"><br>
</form>
<!--提交后，把参数传递给html_action.php-->

1.8示例

<form name="input" action="html_action.php" method="get">
	<!--文本域-->
	Name <input type="text" name="Name"><br>
	<!--密码-->
	Password <input type="password" name="Password"><br>
	<!--单选-->
	性别<br>
	<input type="radio" name="sex" value="male">Male <br>
	<input type="radio" name="sex" value="femal">Femal <br>
	<!--复选-->
	操作系统<br>
	<input type="checkbox" name="OS" value="IOS">IOS<br>
	<input type="checkbox" name="OS" value="Android">Android<br>
	<!--下拉列表-->
	手机<br>
	<select name="phone">
	<option value="apple">Apple</option>
	<option value="xiaomi">Xiaomi</option>
	<option value="piexl" selected>Piexl</option>
	</select>
	</br>
	<!--提交-->
	<input type="submit" value="提交"><br>
	</form>

更多的需要再学

有机会继续写

CSS

层叠样式表（英语：Cascading Style Sheets，简写 CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、階層式樣式表，一种用来为结构化文档（如 HTML文档或 XML应用）添加样式（字体、间距和颜色等）的计算机语言。

简单的说就是规定了html文件中某标签内部的内容的字体、间距和颜色等样式，将文件的内容与显示分隔开来。

CSS 的创建

CSS 信息可以来自： 作者样式

  • 作者可以在他的 HTML 文件中确定一个外来的、独立的 CSS 文件（外部样式表）
  • 作者可以将 CSS 信息包含在 HTML 文件内（内部样式表）
  • 作者可以在一个 HTML 标签内结合 CSS 指令（内联样式），

自定样式 读者可以在他的浏览器内设立一个 CSS 文件。这个 CSS 文件可以用在所有的 HTML 文件上。假如作者的 CSS 文件与读者的相冲突，那么读者可以选择一个

浏览器样式 假如外部没有特别指定一个样式的话，一般浏览器自己有一个内在的样式

我们在编写html文件的过程中使用的就是作者样式

优先级 外部样式表 < 内部样式表 < 内联样式表

例

Index.html文件

<!DOCTYPE html>
<html >
    <head>
		<meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="./style.css"  />  
		<!--引用外部样式style.css文件，文件位于./style.css即index同目录(./)下-->		
        <title>biaoti</title> 
                <style type="text/css">
                       body p {color: red}
                        
                </style>    
		<!-- style内规定了body内的p内的字体颜色为red-->
    </head>
    <body>
                  外部样式表规定body内部的字体为yellow
				  <p> 内部样式表改了body内部p内的字体为red </p>
				  <p style="color: blue">内联样式表改了p的字体为blue </p>
				  <!-- style后“内部规定了p内的字体为blue-->
    </body>
</html>

style.css文件

body{color: yellow}
<!-- body内的p内的字体颜色为red-->

效果如图

由上述例子我们可以看到，CSS的位置和他们的优先级。

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（html文档的）头部：

格式

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档,mystyle.css也可为指向某文件的网页链接(例https://assets-cdn.github.com/assets/frameworks-77c3b874f32e71b14cded5a120f42f5c7288fa52e0a37f2d5919fbd8bcfca63c.css）只要浏览器能get到就行，推荐以css为拓展名

css文件书写语法

即

标签1 { 声明1;声明2;...声明N;}
标签2 { 声明1;声明2;...声明N;}
标签3 { 声明1;声明2;...声明N;}
...

标签即为html标签，表明之后声明的生效范围，声明是指标签内范围的具体格式，声明一般为属性:值，当值有多个字符串时用引号”括起来值的所有单词。 示例

body{color: yellow}

就表明标签body内部所有字体的颜色为yellow，更多标签和声明参见 [转载&修改]20170907html学习(三)css样式表 CSS 手册 或者搜索css样式大全之类的关键词 更多高级书写语法

  1. 标签1 标签2 {声明} 表示生效范围为标签1内的标签2内的内容格式
  2. 标签1，标签2，标签3{声明} 表示标签1，2，3内的内容格式都为声明的格式

有时间继续写

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style> 标签在html文档head标签内定义

格式

<head>
<style type="text/css">
规则
</style>
</head>

规则书写语法 同css文件书写语法

内联样式

仅需要在一个标签内上应用一次时，使用内联样式例 格式

<标签 style="声明1;声明2;...声明N;">标签内部的内容</标签>

声明语法 同css文件书写语法中的声明语法一样属性:值

备注

  1. 建议多在网页上，右键查看源代码，可以查看相关网站的html内容,chrome浏览器，f12还可查看与html搭配的各种元素，有的网站还可看到css文件
  2. chrome在F12查看源代码时可以，再选择element，可以更改源代码查看效果，应用把表单类型password改为text，可查看浏览器自动填充密码

本文首发于我的博客@cndaqiang.
本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！

上一篇 bash学习(一)基本语法

下一篇 PHP(一)基础语法

目录

访客数据