HTML和CSS入门（1）

来源：互联网发布：php导出excel表格乱码编辑：程序博客网时间：2024/05/17 22:00

HTML入门基础

一.关于网页的基础知识

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

二.HTML的基本结构

<html>      <head><!--头部-->           <title>这里写标题</title>      </head>      <body><!--主体-->      </body></html>

三.Webstorm中的基础操作

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

四.HTML中的基础标签

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

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

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

<ul type="square方块/disc圆点/circle空心圆（图标样式）">       <li></li>  <!--内容，一行一个--></ul>

（2）有序列表：

<ol type="a/A/I/i/1(序标类型)"  start="n(起始数字)">       <li></li></ol>

（3）自定义列表：

<dl>       <dt></dt><!--标题-->       <dd></dd><!--描述--></dl>

9.表格标签：

<table border="Xpx(边框线)" width="Xpx(宽度)" cellpadding="(Xpx字靠边线的距离)" cellspacing="Xpx(单元格的间距)" >           <caption></caption><!--表头-->           <tr> <!--行，从上往下一行一个tr标签-->                 <th></th><!--标题，属性:跨列colspan="n"/跨行rowspan="n"（<td>中也适用）-->                 <td></td><!--单元格，从左往右一个单元格一个td标签-->           </tr></table>

10.表单标签（例）：

<form  action="提交的目标地址" method="get(明文)/post(暗文)">            <p>                 <label for="usename">用户名：</label>                 <input type="text" id="usename"/>          </p><!--单行文本框-->          <p>                 密码：<input type="password"/>          </p><!--密码框（看不见）-->          <p>                 性别：<input type="radio" name="sex" checked>女                 <input type="radio" name="sex">男          </p><!--按钮组（当name相同时会变成单选按钮，checked为默认选择）-->          <p>                 爱好：<input type="checkbox" checked/>音乐<br>                 <input type="checkbox"/>看书<br>                 <input type="checkbox"/>体育          </p><!--复选框，checked为默认选中-->          <p>                 地址：                 <select>                     <option value="陕西" selected>陕西</option>                 </select>          </p><!--下拉菜单，select mutiple-->          <p>                 上传头像：<input type="file"/>          </p><!--文件域-->          <p>                 留言板：<textarea name="" id="" cols="" rows="">                 </textarea>          </p><!--多行文本域-->          <p>                 <input type="submit"/><!--提交按钮-->                 <input type="reset"/><!--重置按钮-->                 <button>取消</button><!--自定义按钮-->          </p></form>

运行效果图

阅读全文

0 0