初识HTML/CSS之HTML篇

HTML是一种超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

首先是HTML的基本结构，head标签里面用于设置标题栏（title）以及插入一些脚本（script）,样式文件（CSS）和meta信息。body标签存放HTML的主体内容。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body></body>
</html>

下面介绍HTML的几个常用标签（由于标签显示与浏览器有冲突，所以涉及的标签均未写尖括号）
1、标题标签
共有六级标题用h1~6来表示：

<body>
<h1>这是一级标签</h1>
<h2>这是二级标签</h2>
<h3>这是三级标签</h3>
<h4>这是四级标签</h4>
<h5>这是五级标签</h5>
<h6>这是六级标签</h6>
</body>

2、段落（p）、换行（br）、分割线（hr）、斜体（em）、加粗（strong）
段落标签默认情况下会有一定的边距，可以进行设置

<body><p><em>这是第一行</em><br/><strong>这是第二行</strong></p><hr/></body>

3、注释和特殊符号（后面都要带分号，还是由于冲突省略）
空格（&nbsp）、大于号（&gt）、小于号（&lt）、引号（&quot）、版权符号@（&copy）、注释（请参考代码，快捷键单行：ctrl+/，多行：ctrl+shift+/）

<body>
<!--这是一个注释-->
<p>祝&nbsp;大&nbsp;家&nbsp;五&nbsp;一&nbsp;节&nbsp;快&nbsp;乐&nbsp;！</p>
<p>&copy;&quot;wk&quot;</p>
<p>&lt;2017/4/29&gt;</p>
</body>

4、图像标签（img）
src属性指定图片所在位置，相对路径或绝对路径均可（这里指的是当前html文件的路径），返回上级目录可使用../
alt用于指定图片的替换文本
工程中创建一个img目录，放入一个图片。

<p>我是小明</p>
<img src="img/xiaoming.jpg" alt="正在加载"/>

然后将html文件放入test文件夹中

<p>我是一个苹果</p>
<img src="../img/apple.jpg" alt="正在加载" width="200" height="200"/>

4、超链接标签（a）
href指定URL，target指定目标窗口位置（当前或新建），并指定点击对象（文本图像或网址）
/test下创建一个second.html文件作为跳转界面。

<a href="second.html" target="_blank">传送门</a>

点击后跳转到……

5、锚链接
类似于超链接，跳转到某一具体位置（当前网页或其他网页），首先要创建跳转标记，即设置name属性，通过#name创建跳转链接

<a href="second.html#mark" target="_blank">传送门</a>

在second.html中创建锚点

<a name="mark">你好！我的名字叫纳什男爵</a>

跳转后可直接定位到second.xml中的指定位置处。

6、列表
（1）有序列表（ol）
li标签指定列表项
type属性还可指定为A或a作为列表序号


<ol type="数字">周列表<li>星期一</li><li>星期二</li><li>星期三</li><li>星期四</li><li>星期五</li>
</ol>

（2）无序列表（ul）
square指前面的小方块，dics为实心圆（默认值），circle为空心圆

<ul type="square">劳动节<li>五月一号</li><li>五月二号</li><li>五月三号</li>
</ul>

（3）自定义列表（dl）
dt标签可指定不同类型列表项，dd指定列表项

<dl><dt>羊族</dt><dd>喜羊羊</dd><dd>美羊羊</dd><dd>懒羊羊</dd><dt>狼族</dt><dd>灰太狼</dd><dd>红太狼</dd>
</dl>

7、表格（table）
tr指定行，td指定单元格
boder属性指定表格边界大小，align指定表格对齐方式（默认left），colspan和rowspan分别指定单元格跨列或跨行数

<table border="1" align="left"><tr><td colspan="3">成绩表</td></tr><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr ><tr><td>数学</td><td>100</td></tr> <tr><td rowspan="2">李四</td><td>语文</td><td>99</td></tr ><tr><td>数学</td><td>99</td></tr>
</table>

8、表单（form）
登录表或信息表等，action指定发送表单数据的地址，method指定发送方式（post和get），在input标签中的type属性选择类型，text指文本框，password密码框，checkbox复选框等等

<form action="second.html" method="post"><p>QQ2050登录界面</p><p>姓名：<input name="name" type="text"/></p><p>密码：<input name="password" type="password" maxlength="8"/></p><p>开启声音<input type="checkbox" checked="checked"/></p><p>自动登录<input type="checkbox"/></p><p>记住密码<input type="checkbox"/></p><input type="submit" value="登录"/>
</form>

9、列表框（select）
option标签为选项，size属性指定显示行数


<select name="月份" size="1">
<option value="January">一月</option>
<option value="February">二月</option>
<option value="March">三月</option>
<option value="April">四月</option>
<option value="May">五月</option>
<option value="June">六月</option>
<option value="July">七月</option>
<option value="August">八月</option>
<option value="September">九月</option>
<option value="October">十月</option>
<option value="November">十一月</option>
<option value="December">十二月</option>
</select>

10、多行文本域（textarea）
cols属性设置最大显示列数，rows属性设置最大显示行数

<textarea name="文本域" cols="30" rows="10"></textarea>

初识HTML/CSS之HTML篇相关推荐

vue引用自定义.css文件 - 语法篇
vue如何引用外部自定义的.css文件 ? 一般都会因为存在权重或优先级设置的问题才会侧意引用: [详情进入查看:如何在scoped不污染组件样式的前提下,实现el-input组件样式覆盖?] 再者, ...
初识c语言（入门篇）
目录一.简单介绍C语言二.认识一个简单的C程序三.数据类型四.常量.变量五.字符串.转义字符和注释六.选择语句七.循环语句八.函数九.数组十.关键字十一.指针一.简单介绍C语言 ...
初识Linux：第五篇
初识Linux:第五篇初识Linux:第五篇 1.Linux下的用户 2.Linux权限管理 2.1文件权限管理 2.2文件权限的更改 2.21改变文件访问权限属性 2.22改变文件的身份 3.三个 ...
学习 HTML+CSS 这一篇就够了
文章目录学习 HTML+CSS 这一篇就够了 ! HTML 简介一.网页 1 .什么是网页 2. 什么是 HTML 3.网页的形成 4.网页总结二.浏览器 1. 常用浏览器 2.浏览器内核三. ...
【前端学习之HTMLCSS】-- CSS第三篇 -- 选择器（上）
[前端学习之HTML&CSS]-- CSS第三篇 – 选择器(上) 文章目录 [前端学习之HTML&CSS]-- CSS第三篇 -- 选择器(上) 前言选择器简单选择器 1. ID ...
CSS — 导航栏篇（二）
搜索框在上文 CSS - 导航栏篇(一),我们已经介绍了导航栏组成要素,以及其中两大元素(LOGO 和选项列表)的书写思路,现在开始介绍第三大元素 -- 搜索框搜索框的作用,就是让你输入你想要搜 ...
初识html+css 第三天
初识html+css 3 1. 背景图的属性使用 <style>body{ /* 如何添加一个背景图 background-image: url(" ") */back ...
CSS自学教程--一天搞定CSS（终篇总结）
虽然说是一天搞定CSS,实际上也没有那么简单.只能说让你快速了解常见的CSS知识,解决基本的页面样式布局和设置. 每个独立的CSS知识点都比较简单,但是它们的应用非常灵活,特别是在综合应用中. 粗略说 ...
css画横线箭头_2020年你应该关注这50款前端热门工具：CSS HTML 工具篇
大家好,在一篇文章里 2020年让人难以置信的50款前端新工具:JavaScript插件篇(一),我分享了 11 款 JS 插件,本篇文章我将会和大家分享七款 CSS.HTML 相关的新工具. 12. ...

初识HTML/CSS之HTML篇

初识HTML/CSS之HTML篇相关推荐

最新文章

热门文章