zoukankan      html  css  js  c++  java
  • day1笔记--学习了html基础

    <!-- 网页基本结构 -->
    <!-- 声明:告诉浏览器,当前写的代码是属于html5版本的代码 -->
    <!DOCTYPE html> <!--doc-->
    <!--document--> 把整个浏览器当做一个文档
    <html> <!-- html代码开始标签 -->
    	<head>
    		<meta charset="utf-8" /> <!--设置中文字符集,防止乱码-->
    		<title>页面标签</title>
    	</head>
    	<body>
    		文字
    		<img></img>
    	</body>
    </html>
    

    浏览器类型

    IE内核
    chorme内核
    firefox
    双核(IE和Chorme内核)
    

    html,css,js

    html 负责结构 毛坯房
    css 负责美 精装修
    js 负责动(互动) 智能家具

    html 超文本

    一种描述性的标记语言(所记既所得)
    htm或html作为后缀 用dreamweaver,HBuilder,记事本打开
    标记是用来描述网页内容的特定符号

    学HTML就是学习各种标签

    html和浏览器有容错性,写错了也会显示,但是还是要跟标准走。

    HBuilder操作

    新建文件目录->点击项目,右键新建
    快捷键
    保存 ctrl + s
    剪切 ctrl + x
    整行删除 ctrl + d
    代码联想 alt + /
    代码整理 ctl + shift + f
    冲突-> 输入法 -> 属性 -> 快捷键 -> 修改

    在浏览器内运行 ctl + r 在HBuilder上的服务器运行

    标签

    普通标签

    中间文字称之为内容

    标题标签

    <h?> -> ?:1-6 没有h7标签,大于6的标签和普通文字一样

    有大小之分(由大到小)
    加粗效果
    独占一行(块元素)

    段落标签

    特点:

    • 独占一行,有段间距
    • body提供多少宽度
    • 段落标签宽度就是多少
      缺点:换行需要换行标签实现
    <p> </p>
    

    自闭合标签

    换行标签

    html中没有所谓的回车 ``` // 属性src 指向要显示的图片 // 没有独占一行 ```

    在html中换行需要

    空格也需要一些特殊写法:转义字符 需要的时候百度。

    常见的转义字符
    空格 &bnsp;
    > &gt;
    < &lt;
    " quot;
    & &amp;
    
    水平线标签其他文字类标签
    水平线标签:<hr>
    加粗标签:<strong> </strong>  <b> </b>
    斜体:<em> </em> <i> </i>
    下划线:<u> </u>
    删除线:<s> </s>
    
    公式
    下标标签:sub
    H<sub>2</sub>SO<sub>4</sub>
    上标标签:sup
    a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
    
    

    练习3

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<div align="center">
    			<img src="img/pic.jpg" />
    			<h2>《登幽州台歌》</h2>
    			<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--陈子昂</h3>
    			<p>前不见古人,</p>
    			<p>后不见来者。</p>
    			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;念天地之悠悠,</p>
    			<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;独苍然而涕下。</p>
    		</div>
    	</body>
    </html>
    
    

    练习4

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<h3>各科小常识</h3>
    		<hr />
    		<h4>语文</h4>
    		<p>asdfoajdasdfjklajsdfljaldfjaofijaiodfjadfkjalf</p>
    		<hr />
    		<h4>数学</h4>
    		<p>勾股定理 直角三角形: a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
    		<hr />
    		<h4>英语</h4>
    		<p> No pain, no gain.</p>
    		<hr />
    		<h4>化学</h4>
    		<p>H<sub>2</sub>SO<sub>4</sub></p>
    		<hr />
    		<h4>经济</h4>
    		<p>版权符号:&copy;</p>
    		<p>注册商标:&reg;</p>
    	</body>
    </html>
    

    属性

    标签和属性大小写不敏感
    属性为html提供附加信息

    行内元素(标签)

    可以和其他行内元素及文字共享一行
    br img sub sup b i ...
    

    块元素(标签)

    独占一行
    h1-h6 p hr div...
    

    普通标签

    <xxx>内容</xxx>
    

    自闭合标签

    <yyy/>
    
    超链接
    普通,行内标签
    1. 站内链接(自己写的工程里面的)
    2. 站外链接(别人写的工程里面的)
    <a href="http://www.baidu.com">百度一下</a>
    自身打开,同默认一样
    <a href="http://www.baidu.com" target="_self">百度一下</a>
    在新的页面打开
    <a href="http://www.baidu.com" target="_blank">百度一下</a>
    
    锚标签
    找到本页面中的某个标签,让他显示在页面的最上面
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<h3>各科小常识</h3>
    		<a href="#yw">语文</a>
    		<a href="#hx">数学 </a>
    		<a href="#yy">英语</a>
    		<a href="#hx">化学</a>
    		<a href="#jj">经济</a>
    		<hr />
    		<h4 id="yw">语文</h4>
    		<p>asdfoajdasdfjklajsdfljaldfjaofijaiodfjadfkjalf</p>
    		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    		<hr />
    		<h4 id="sx">数学</h4>
    		<p>勾股定理 直角三角形: a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
    		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    		<hr />
    		<h4 id="yy">英语</h4>
    		<p> No pain, no gain.</p>
    		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    		<hr />
    		<h4 id="hx">化学</h4>
    		<p>H<sub>2</sub>SO<sub>4</sub></p>
    		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    		<hr />
    		<h4 id="jj">经济</h4>
    		<p>版权符号:&copy;</p>
    		<p>注册商标:&reg;</p>
    	</body>
    </html>
    
    

    列表

    属性值有区别大小写
    3种
    1. 有序列表
    <ol type="">
    	<li></li>
    <ol>
    2. 无序列表 --> 目录
    <ul>
    	<li> </li>
    	<li> </li>
    	<li> </li>
    	<li> </li>
    	<li> </li>
    </ul>
    3. 自定义列表(少用)
    <dl>
    	<dt></dt>
    	<dd></dd>
    <dl>
    
    除了a标签以外,不建议行内元素包着块元素
    建议块元素包着行外元素
    <ol>
    	<li><a href="#">111</a></li>
    	<ul type="disc">
    		<li>aaa</li>
    		<li>bbb</li>
    	</ul>
    	</li>
    </ol>
    	
    
    练习5
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<ol>
    			<li><a href="#">Windows Me</a>
    			<li><a href="#">Windows 2003</a></li>
    				<ul type="disc">
    					<li>Windows Server 2003 Web</li>
    					<li>Windows Server 2003 Standard</li>
    					<li>Windows Server 2003 Enterprise</li>
    					<li>Windows Server 2003 Datacenter</li>
    				</ul>
    			</li>
    		</ol>
    	</body>
    </html>
    
    练习6
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		<ul>
    			<li>111</li>
    			<li>222</li>
    			<ul>
    				<li>aaa</li>
    				<li>bbb</li>
    				<ul>
    					<li>AAA</li>
    					<li>BBB</li>
    				</ul>
    			</ul>
    			<li>333</li>
    		</ul>
    	</body>
    </html>
    

    表格

    <table border="1px"> <!--表格标签 -->
    	<tr> <!-- 表格中的行标签 -->
    		<th rowspan="3">京<br/>东</th>
    		<th> </th> <!- 表头:居中,加粗 -->
    		<th> </th>
    	</tr>
    	<tr> <!-- 表格中的行标签 -->
    		<td> </td> <!- 表格中的单元格 -->
    		<td> </td>
    	</tr>
    	<tr> <!-- 表格中的行标签 -->
    		<td colspan="2"> </td> <!- 跨行跨列 -->
    	</tr>
    </table>
    
    
    
    表格填充和间距
    border:边框的厚度
    
    只可以在table设置
    cellpadding:内间距,单元格填充
    cellspacing:外边距,单元格间距
    bgcolor:背景颜色
    bordercolor:边框颜色
    

    对齐方式

    align 水平对齐方式  默认左对齐
    valign 垂直对齐方式 默认居中对齐
    
    宽度
    在单元格中设置
    一列中加一个就可以了,heigth类似
    width
    
  • 相关阅读:
    linux驱动开发学习一:创建一个字符设备
    如何高效的对有序数组去重
    找到缺失的第一个正整数
    .NET不可变集合已经正式发布
    中国人唯一不认可的成功——就是家庭的和睦,人生的平淡【转】
    自己动手搭建 MongoDB 环境,并建立一个 .NET HelloWorld 程序测试
    ASP.NET MVC 中如何用自定义 Handler 来处理来自 AJAX 请求的 HttpRequestValidationException 错误
    自己动手搭建 Redis 环境,并建立一个 .NET HelloWorld 程序测试
    ServiceStack 介绍
    一步一步实战扩展 ASP.NET Route,实现小写 URL、个性化 URL
  • 原文地址:https://www.cnblogs.com/isChenJY/p/13599346.html
Copyright © 2011-2022 走看看