HTML+CSS学习Day02笔记

最新推荐文章于 2024-06-04 14:04:24 发布

怒锤狗男人

最新推荐文章于 2024-06-04 14:04:24 发布

阅读量216

点赞数

分类专栏：一阶段文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/qq_57479061/article/details/117379079

版权

一阶段专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Day02笔记

一、html语法注释

什么是注释，就是解释代码的意思，写给自己和别人看的
把一个东西注释起来后，浏览器就不会识别它
注释语法：

<!--注释-->

注意点：<>叫做尖括号 在尖括号里面首先规定是一个!，感叹号后面跟杠，杠最少必须有四个杠

二、建站流程

1、什么是建站流程，就是一个网站的开发过程

2、建站有几个步骤：

a、购买域名（域名就是网址 例如：http://www.baidu.com），通过域名访问网站

b、购买服务器：  
    服务器的作用：存储网站，可以让大家通过域名找到对应的网站
    服务器的价格一般是比较贵的，所以在实际的使用过程中也可以租用服务器

    服务器分类：
        =>实际服务器，把服务器带回家里或者公司，服务器需要自己维护
        =>虚拟服务器（云主机），不需要把服务器带回去，有些服务器供应商会把服务器的空间按着需求分割不同大小的空间，然后设置一个用户名和密码，购买后可以直接使用
        去哪些网站购买域名和服务器：
        =>新网
        =>西部数码
        =>新浪云
        =>腾讯云
        =>阿里云（万网）
        =>百度云
        =>华为云
        ...
c、网站建设:
    =>确定网站主题 -- 客户（甲方）
    =>收集资料 -- 产品
    =>规划网站 -- UI小姐姐
    =>制作页面 -- 前端

d、网站推广
    =>公司运营人员

    =>网站推广渠道有哪些?
        微信公众号
        抖音
        快手
        今日头条
        新浪热搜
        百度竞价

e、网站维护

三、HTML超文本标记语言

文本，指的是文字，包含其他语言
超文本，人+超叫做超人，超人和人的区别是什么，内裤外穿，超人具备一些人没有的能力，会飞、打怪兽等等。超文本指的是网页中除了文字以外的其他东西，例如：超链接、图片、音频、视频、程序
标记，记号，把一个东西标识出来方便自己识别。标记在html语言里面表示的是一个字母或者单词表示的意思，例如一个p字母，在语言里面表示的就是段落的意思

四、HTML语言相互关系

1、从大的语言的范围上划分，把html语言划分了三个阶段：

html超文本标记语言 从1.0 - 4.0

xhtml可扩展的超文本标记语言，它是html的严格模式，从语法上更为严格

html5是html语言的最新的版本

2、html结构指的是html语言执行的一个环境

五、html基本语法

1)常规标记（对儿标记、双标记）

<标记 属性=“属性值” 属性=“属性值”></标记>

2)空标记（单标记）

<标记 属性=“属性值” />

说明：

写在<>中的第一个单词叫做标记，标签，元素。
标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。
一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。
空标记没有结束标签，用“/”代替。

六、html5基本结构

结构：

<!--html5基本结构是语言制定的标准里面规定好不能修改-->

<!--声明文档类型，告诉浏览器这是一个什么类型的文件（文档），这是一个网页类型文件-->
<!doctype html>

<!--根标记，就是html语言里面最大的标记-->
<html>
    
<!--网页头部-->
<head>
    
<!--
	字符编码：1、解决乱码问题 2、兼容沟通
    常见编码：GBK（亚太地区使用） gb2312（国内使用的） utf-8（国际标准）
-->
<meta charset="utf-8"/>
    
<!--网页标题-->
<title>这是我自己的网页</title>
    
</head>
    
<!--网页主体，网页内容都是放在主体里面的-->
<body>
	这是我的第一个网页，有没有些小小的激动! 完全无感
</body>
</html>

注意点：如果不设置meta标记，在低版本的浏览器里面会出现乱码问题

七、常用标记

1、标题标记：

h1 - h6 标题标记双标记
特点：自上而下排列的，独占一行的
属性：align=“left|center|right”; 文字水平对齐方
代码：

<h1 align="center">一级标题 -- 标题界扛把子</h1>

<h2 align="right">二级标题 -- 二哥喜欢去二楼</h2>

<h3 align="left">三级标题 -- 啊骚</h3>

<h4>四级标题 -- 小四</h4>

<h5>五级标题 -- 小五</h5>

<h6>六级标题 -- 小幺</h6>

2、段落标记：

p 段落标记双标记
特点：自上而下排列的，独占一行的
代码：

<p align="center">小pp同学</p>

<p align="right">大pp同学</p>

<p>人民网北京4月19日电 （赵超）今天，国新办举行网络提速降费国务院政策例行吹风会。<br/><br/>工业和信息化部信息通信发展司负责人刘郁林在会上介绍，5G商用一年多来，运营企业努力克服新冠肺炎疫情的影响，加快推进5G网络建设，已经初步建成了全球最大规模的5G移动网络。…</p>

3、换行标记:

br 换行标记单标记
特点：自上而下排列的，独占一行
代码：

<p>人民网北京4月19日电 （赵超）今天，国新办举行网络提速降费国务院政策例行吹风会。<br/><br/>工业和信息化部信息通信发展司负责人刘郁林在会上介绍，5G商用一年多来，运营企业努力克服新冠肺炎疫情的影响，加快推进5G网络建设，已经初步建成了全球最大规模的5G移动网络。…</p>

4、水平线标记:

hr 水平线标记单标记
特点：自上而下排列的，独占一行的
属性：color=“颜色值” 水平线的颜
代码：

<hr color="red"/>

5、加粗标记：

b、strong 加粗标记双标记
特点：横向排列的
代码：

<b>最近不小心长胖了</b>

<strong>嘿嘿！你也胖了</strong>

6、倾斜标记：

i、em 倾斜标记双标记
特点：横向排列的
代码：

<i>需要喝脉动</i>

<em>需要脉动回来</em>

7、预留字符：

一个字符具有某种功能直接使用
代码：

&nbsp; 表示空格

&copy; 版权符号 圈c

&times; 乘号

&lt; 小于

&gt; 大于

8、超链接标记：

a 超链接标记双标记
特点：横向排列的
属性：href=“地址” target="_blank|_self"; blank表示在新窗口打开 self是默认值表示当前窗口
注意点：href="#" 表示空链接，起了一个占位
代码：

<a href="http://www.baidu.com" target="_self">百度一下</a>

<a href="http://news.baidu.com/" target="_blank">新闻</a>

<hr/>

<a href="http://news.baidu.com/" target="_blank">新闻</a>

<a href="https://www.hao123.com/" target="_blank">hao123</a>

<a href="https://map.baidu.com/" target="_blank">地图</a>

<a href="https://live.baidu.com/" target="_blank">直播</a>

<a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a>

<a href="http://tieba.baidu.com/" target="_blank">贴吧</a>

<a href="https://xueshu.baidu.com/" target="_blank">学术</a>

<a href="https://www.baidu.com/more/" target="_blank">更多</a>

9、列表标记：

列表标记双标记

a、无序列表 ul li…

b、有序列表 ol li…

c、自定义列表 dl dt dd…

特点：自上而下排列，独占一行
代码：

<ul>
	<li><a href="#">一季度实际使用外资增长39.9%  百年党史天天读</a></li>
    <li><a href="#">一季度实际使用外资增长39.9%  百年党史天天读</a></li>
    <li><a href="#">一季度实际使用外资增长39.9%  百年党史天天读</a></li>
</ul>

<!--属性：type="数字|A|a|I"-->
<ol type="I">
	<li><a href="#">一季度实际使用外资增长39.9%  百年党史天天读</a></li>
    <li><a href="#">一季度实际使用外资增长39.9%  百年党史天天读</a></li>
    <li><a href="#">一季度实际使用外资增长39.9%  百年党史天天读</a></li>
</ol>

<dl>
	<!--dt里面放的是图片或者名词-->
	<dt>美女</dt>
    <!--解释-->
    <dd>闭月羞花，沉鱼落雁</dd>
</dl>

<dl>
	<!--dt里面放的是图片或者名词-->
	<dt>日本美女</dt>
    <!--解释-->
    <dd>有技术含量的女孩子</dd>
</dl>

10、图片标记：

img 图片标记单标记
特点：横向排列的
属性：

src 路径

width 图片宽度

height 图片高度

title 图片标题，当鼠标悬停（移动到）在图片上面时出现

alt 提示信息，当图片由于某种原因（网速慢、被和谐、路径错误）无法加载时给用户一个提示

代码：

<img src="fj.jpg" width="100" title="这是凤姐你喜欢吗？"/>

<img src="images/5.jp" width="200" alt="根据相关法律法规规定你预览的信息存在敏感内容不予显示"/>

图片路径：

绝对路径：带盘符的路径或者网络地址

例如：
C:\software\feiqiu\安装

http://contentcms-bj.cdn.bcebos.com/cmspic/6529f33c800b3e80c43cc1828d3babdc.jpeg?x-bce-process=image/crop,x_0,y_0,w_626,h_365

a、当当前文件与目标文件在同一目录下时，直接写图片名称+扩展名

b、当当前文件与目标文件的文件夹在同一目录下时，先写目标文件夹名，再写目标文件名+扩展名

c、当当前文件的文件夹与目标文件的文件夹在同一目录下时，../目标文件夹名/再写目标文件名+扩展名

注意点：当前文件指的是就是网页、目标文件指的是就是图片、 ./表示当前目录、…/表示返回上一级目录

11、表格标记：

table 表格标记双标记
特点：自上而下排列的，独占一行
作用：显示数据
组成：table（表格）、tr（行）、td（列、单元格）
属性：

width 宽度

height 高度

border 边框

bordercolor 边框颜色

bgcolor 背景颜色

colspan 合并列，合并左右合并的就是列

rowspan 合并行，合并上下合并的就是行

cellspacing 指的是单元格与单元格之间的间隙

cellpadding 指的是单元格内容到边框之间的距离

align="left|center|right" 表格水平对齐方式

使用规则：

当align设置在table上面时，表示的是表格的水平对齐方式

当align设置在tr上面时，表示的是行内容的水平对齐方式

当align设置在td上面时，表示的是单元格的内容的水平对齐方式

valign="top|middle|bottom" 表示表格内容的垂直对齐方式

代码：

<!--合并行和列-->
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="0">
	<tr>
    	<td colspan="2">1</td>
      
        <td rowspan="3">3</td>
    </tr>
    <tr>
    	<td>1</td>
        <td>2</td>
        
    </tr>
    <tr>
    	<td>1</td>
        <td>2</td>
     
    </tr>
</table>

格的内容的水平对齐方式

valign=“top|middle|bottom” 表示表格内容的垂直对齐方式

- 代码：

```html
<!--合并行和列-->
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="0">
	<tr>
    	<td colspan="2">1</td>
      
        <td rowspan="3">3</td>
    </tr>
    <tr>
    	<td>1</td>
        <td>2</td>
        
    </tr>
    <tr>
    	<td>1</td>
        <td>2</td>
     
    </tr>
</table>

怒锤狗男人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS学习Day02笔记

Day02笔记一、html语法注释什么是注释，就是解释代码的意思，写给自己和别人看的把一个东西注释起来后，浏览器就不会识别它注释语法：注意点：<>叫做尖括号在尖括号里面首先规定是一个!，感叹号后面跟杠，杠最少必须有四个杠二、建站流程1、什么是建站流程，就是一个网站的开发过程2、建站有几个步骤：a、购买域名（域名就是网址例如：http://www.baidu.com），通过域名访问网站b、购买服务器：服务器的作用：存储
复制链接

扫一扫