HTML和CSS入门（1）

「爱情、让人受尽委屈。」 2022-06-06 04:16 183阅读 0赞

# HTML入门基础 #

一.关于网页的基础知识

*  “.com”表示盈利性组织，国际最广泛流行的通用域名格式  
    “.cn”表示中国国家域名  
    “.edu”表示教育  
    “.gov”表示政府单位  
    域名跟IP地址是绑定的
 *  DNS：域名解析服务器
 *  HTML:超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
 *  CSS：层叠样式表。是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态的对网页各元素进行格式化。
 *  相对路径：从某一个位置开始的。  
    绝对路径：从盘服根部开始的

二.HTML的基本结构

<html>
          <head>
               <title>这里写标题</title>
          </head>
          <body>
          </body>
    </html>

三.Webstorm中的基础操作

1.  新建工程：打开webstorm–Empty Project–选择存放路径–File–New–Html
2.  调整字体大小：File–Setting–Editor–Colors&Fonts–Font–Save As…(OK)–设置size
3.  测试文本：Lorem+Tab
4.  测试路径：ctrl+鼠标悬停
5.  浏览文件快捷键：Alt+F2

四.HTML中的基础标签

1.  段落标签：`<p>里面放想写的内容</p>`
2.  标题标签：`<hn>标题名称</hn>`  
    (n=1、2、…、6。n越大，字体越小。一个页面中h1只能使用一次。)
3.  图片标签：  
    `<img src="图片路径" alt="图片描述/代替图片的文字" title=“描述属性”/>`  
    其中“src”、“alt”和“title”都属于“img”的属性。“img”还有另外两个属性是：宽width=” XXpx”，高height=”XXpx”。宽和高只设置一个的时候就是等比例缩放。（插入时一张图片一个img标签。）
4.  超链接标签：  
    `<a href="跳转目标网址(Eg:http://www.baidu.com)">跳转名称</a>`  
    当href=”\#”时，为固定连接。  
    属性：target=”目标窗口的打开方式(“\_parent”在原窗口打开/”\_blank”在新页面中打开）”
5.  换行标签：`<br>`（单标签）
6.  分隔线标签：`<hr>`(单标签）  
    属性：size=”XXpx(线的粗细)”  
    color=”red/rgb(255.0.0)/\#FF0000(线的颜色)”  
    width=”XXpx/XX%(线的长短)”
7.  定义文字样式标签（双标签）

定义粗体文本<b>    定义小号文字<small>    定义上标字<sup>
    定义着重文字<em>   定义加重语气<strong>   定义插入字<ins>
    定义斜体文字<i>    定义下标字<sub>        定义删除字<del>

8.列表标签  
（1） 无序列表：

（2）有序列表：

（3）自定义列表：

9.表格标签：

10.表单标签（例）：

![运行效果图][graviSouthEast]

[graviSouthEast]: /images/20220606/3759381a18b946dd84ecdb719133a15c.png